본문 바로가기
WINK-(Web & App)/React.js 스터디

[2023 React.js 스터디] 동승환 #2주차 - 1장. 리액트 입문(10-16)

동승환 2023. 2. 16. 20:30
반응형

10. useRef 로 특정 DOM 선택하기

  • javaScript에서 특정 DOM 을 선택할 때 getElementById, querySelector 와 같은 DOM Selector 함수를 사용해서 DOM 을 선택하듯이 리액트에서는 ref 라는 것을 사용한다. 
  • 함수형 컴포넌트에서는 useRef 라는 Hook함수를, 클래스형 컴포넌트에서는 콜백 함수 또는 React.createRef 라는 함수를 사용한다.
import React, { useState, useRef } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
  const nameInput = useRef();

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = e => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;
  • useRef() 를 사용해 Ref 객체를 만든 후 선택하고 싶은 DOM 에 ref 값으로 설정하면 Ref 객체의 .current 값이 우리가 원하는 DOM 을 가리킨다. ref={} 형태로 작성한다.
  • 위 예제의 onReset 함수에서 input에 포커스하는 focus() DOM API 를 호출해주었다.

11. 배열 렌더링하기

  • 배열이 고정적이라면 상관 없지만, 배열의 인덱스를 하나하나 조회하면서 렌더링하는 방법은 동적인 배열을 렌더링하지 못한다. 동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수인 map() 을 사용한다.
  • map() 함수는 배열 안의 각 원소를 변환하여 새로운 배열을 만들어준다. 리액트에서 동적인 배열을 렌더링할 때는 map() 함수를 사용해 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환하면 된다.
  • 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야한다. key 값은 각 원소들마다 가지는 고유값으로 설정해야한다. ex) id /
  • 만일 배열 안 원소가 가지는 고유값이 없다면 map() 함수를 사용할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하면 된다. 
<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>
  • 배열 렌더링 중 key 설정을 하지 않으면 기본적으로 배열의 index 값을 key 로 사용하게 되고 아래와 같이 콘솔에 경고메시지가 뜬다. 경고메시지가 뜨는 이유는 각 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있기 때문이다.

  • 만일 key 가 없다면 원소와 원소 사이에 원소를 새로 삽입하고 싶거나, 마지막 순서의 원소가 아닌 원소를 제거한 후 리렌더링을 하게 될 때 순서에 맞도록 원소가 바뀌는 비효율적인 과정을 거친다.
  • 예를 들어 아래와 같은 배열이 있다고 가정해보자.
const array = ['a', 'b', 'c', 'd'];
  • 위 배열을 다음과 같이 렌더링한다고 가정해보자.
array.map(item => <div>{item}</div>);
  • 위 배열의 b 와 c 사이에 z 를 삽입하면, 리렌더링을 할 때 <div>b</div> 와 <div>c</div> 사이에 새 div 태그를 삽입을 하는 것이 아니라, 기존의 c 가 z 로 바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입된다.
  • 그 다음에 a 를 제거하면, 기존의 a 가 b 로 바뀌고, b 는 z 로 바뀌고, z는 c로 바뀌고, c는 d 로바뀌고, 맨 마지막에 있는 d 가 제거된다.

 

그러나 key 가 있다면 이 작업과정은 개선된다. 

[
  {
    id: 0,
    text: 'a'
  },
  {
    id: 1,
    text: 'b'
  },
  {
    id: 2,
    text: 'c'
  },
  {
    id: 3,
    text: 'd'
  }
];
array.map(item => <div key={item.id}>{item.text}</div>);

위 배열을 위와 같이 렌더링하면 배열이 업데이트 될 때 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제한다. 따라서 배열을 렌더링 할 때에는 고유한 key 값이 있는 것이 중요하다. (중복될 시에는 오류메시지가 나타나고 업데이트가 제대로 이루어지지 않음.) 

12. useRef 로 컴포넌트 안의 변수 만들기

  • 10장에서 다룬 useRef Hook 은 DOM 을 선택하는 용도 외에 다른 용도가 한가지 더 있다. 이는 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것이다.
  • useRef 로 관리하는 변수는 값이 바뀌어도 컴포넌트가 리렌더링되지 않는다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출 후 렌더링 이후로 업데이트 된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있다.

이 변수를 사용하여 

  • setTimeout, setInterval 을 통해 만들어진 id
  • 외부 라이브러리를 사용하여 생성된 인스턴스
  • scroll 위치

등의 값을 관리 할 수 있다.

 

13. 배열에 항목 추가하기

CreateUser.js

import React from 'react';

function CreateUser({ username, email, onChange, onCreate }) {
  return (
    <div>
      <input
        name="username"
        placeholder="계정명"
        onChange={onChange}
        value={username}
      />
      <input
        name="email"
        placeholder="이메일"
        onChange={onChange}
        value={email}
      />
      <button onClick={onCreate}>등록</button>
    </div>
  );
}

export default CreateUser;

CreateUser.js 컴포넌트는 input 두 개와 button 하나로 이루어짐. 상태관리는 CreateUser 가 아닌 부모 컴포넌트인 App에서 함. input 의 값 및 이벤트로 등록할 함수들을 props 로 넘겨받아서 사용함.

App.js

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;
  • input 에 값을 입력하고, 등록 버튼을 눌렀을 때 input 값들이 잘 초기화 되는지 확인 후 useState 를 사용하여 users 또한 컴포넌트의 상태로서 관리한다. 
  • 이후 배열에 변화를 주는데, 이 때 객체와 마찬가지로 불변성을 지켜주어야 한다. 그렇기에 배열의 push, splice, sort 등의 함수를 사용하면 안된다. 사용해야 한다면 기존의 배열을 한 번 복사하고 나서 사용해야 한다.

여기서 불변성을 지키면서 배열에 새 항목을 추가하는 방법은 두 가지가 있다.

  • 첫번째는 spread 연산자 를 사용하는 것이다.
import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers([...users, user]);

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} />
    </>
  );
}

export default App;
  • 또 다른 방법은 concat 함수를 사용하는 것이다. concat 함수는 기존의 배열을 수정하지 않고, 새로운 원소가 추가된 새로운 배열을 만들어준다.

배열에 새 항목을 추가 할 때에는 이렇게 spread 연산자를 사용하거나, concat 을 사용하면 된다.

 

14. 배열에 항목 제거하기

UserList.js

import React from 'react';

function User({ user, onRemove }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove }) {
  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} onRemove={onRemove} />
      ))}
    </div>
  );
}

export default UserList;
  • UserList 에서 각 User 컴포넌트를 보여줄 때, 삭제 버튼을 렌더링해준다.
  • User 컴포넌트의 삭제 버튼이 클릭 될 때 user.id 값을 앞으로 props 로 받아올 onRemove 함수의 파라미터로 넣어서 호출해주어야 한다. - onRemove "id 가 __인 객체를 삭제해라" 라는 역할을 가지고 있다. 이 onRemove 함수는 UserList 에서도 전달 받을 것이며, 이를 그대로 User 컴포넌트에게 전달해 줄 것이다.
  • 배열에 있는 항목을 제거할 때에는, 추가할 때와 마찬가지로 불변성을 지켜가면서 업데이트 해주어야 한다.
  • 불변성을 지키면서 특정 원소를 배열에서 제거하려면 filter 배열 내장 함수를 사용하는 것이 가장 편하다. 이 함수는 배열에서 특정 조건을 만족하는 원소들만 추출하여 새로운 배열을 만들어준다.

App.js

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };

  const onRemove = id => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} />
    </>
  );
}

export default App;

 

15. 배열에 항목 수정하기

User 컴포넌트에 계정명을 클릭했을 때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현한다.

 

App.js

import React, { useRef, useState } from 'react';
import UserList from './UserList';
import CreateUser from './CreateUser';

function App() {
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
  const { username, email } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  };
  const [users, setUsers] = useState([
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]);

  const nextId = useRef(4);
  const onCreate = () => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  };

  const onRemove = id => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  };
  const onToggle = id => {
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  };
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
    </>
  );
}

export default App;

UserList.js

import React from 'react';

function User({ user, onRemove, onToggle }) {
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;
  • App 컴포넌트의 users 배열 안의 객체 안에 active 라는 속성을 추가한다.
  • User 컴포넌트에서 방금 넣어준 active 값에 따라 폰트의 색상을 바꿔주도록 구현한다. 추가적으로, cursor 필드를 설정하여 마우스를 올렸을 때 커서가 손가락 모양으로 변하도록 한다.
  • App.js 에서 onToggle 이라는 함수를 구현한다. 배열의 불변성을 유지하면서 배열을 업데이트 할 때에도 map 함수를 사용하할 수 있다. id 값을 비교해서 id 가 다르다면 그대로, 같다면 active 값을 반전시키도록 구현한다. onToggle 함수를 만들어 UserList 컴포넌트에게 전달한다.
  • 이후 UserList 컴포넌트에서 onToggle 를 받아와서 User 에게 전달해주고, onRemove 를 구현했었던 것처럼 onToggle 에 id 를 넣어서 호출한다.

16. useEffect 를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기

마운트 / 언마운트

UserList.js

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

useEffect 를 사용할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열( deps )을 넣는다. 만약 deps 배열을 비우게 되면, 컴포넌트가 처음 나타날 때에만 useEffect 에 등록한 함수가 호출된다.

 

또한 useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부른다. cleanup 함수는 useEffect 에 대한 뒷정리를 해준다고 이해하면 된다. deps 가 비어있는 경우 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

 

마운트 시에 하는 작업

  • props 로 받은 값을 컴포넌트의 로컬 상태로 설정
  • 외부 API 요청(REST API 등)
  • 라이브러리 사용(D3, Video.js 등...)
  • setInterval 을 통한 반복작업 혹은 setTImeout 을 통한 작업 예약

언마운트 시에 하는 작업

  • setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기(clearInterval, clearTimeout)
  • 라이브러리 인스턴스 제거

deps 에 특정 값 넣기

deps 에 특정 값을 넣게 되면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다. 또한 deps 안에 특정 값이 있다면 언마운트시에도 호출이 되고, 값이 바뀌기 직전에도 호출된다.

 

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log('user 값이 설정됨');
    console.log(user);
    return () => {
      console.log('user 가 바뀌기 전..');
      console.log(user);
    };
  }, [user]);
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

useEffect 안에서 사용하는 상태나, props 가 있다면 useEffect 의 deps 에 넣어주는 것이 규칙이다. 그렇지 않게 되면 useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가리키지 않게 된다.

 

deps 파라미터를 생략하기

deps 파라미터를 생략하면, 컴포넌트가 리렌더링 될 때마다 호출된다.

import React, { useEffect } from 'react';

function User({ user, onRemove, onToggle }) {
  useEffect(() => {
    console.log(user);
  });
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

리액트 컴포넌트는 바뀐 내용이 없다 할지라도 기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링 된다. 

물론, 실제 DOM 에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당한다. 그러나 Virtual DOM 에는 모든걸 다 렌더링 하고 있다는 것이다.

 

이후, 컴포넌트를 최적화 하는 과정에서 기존의 내용을 그대로 사용하면서 Virtual DOM 에 렌더링 하는 리소스를 아낄 수도 있다.

반응형
저작자표시 동일조건

'WINK-(Web & App) > React.js 스터디' 카테고리의 다른 글

[2023 React.js 스터디] 이지원 #3주차 - 2장. 리액트 컴포넌트 스타일링하기(1~4) / 4장. API 연동하기 (1)  (0) 2023.02.26
[2023 React.js 스터디] 유승우 #4주차 - React Router v6  (0) 2023.02.26
[2023 React.js 스터디] 임혜진 #2주차 - 즐거운 수강신청 사이트 만들기~  (1) 2023.02.16
[2023 React.js 스터디] 조다운 # 1주차 - 1장. 리액트 입문(1-9)  (0) 2023.02.09
[2023 React.js 스터디] 사민주 #1주차 - 1장 1~9절 <과제>  (0) 2023.02.09

'WINK-(Web & App)/React.js 스터디' Related Articles

티스토리툴바