TIL - 55

React 에서 DOM 을 접근할 수 있다? (O/X)

• 접근 할 수 있다. useRef()를 사용하자!

const nameInput = useRef();
 👉🏼 1. useRef() 를 사용하여 Ref 객체를 만들고 
  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
 👉🏼 3. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 됩니다.
  };
  
    return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
   👉🏼 2.  이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다.
      />
      

• 위 예제에서는 onReset 함수에서 input 에 포커스를 하는 focus() DOM API 를 호출 - > . 이름 input 에 포커스가 잡힌다.

배열의 랜더링

• 배열을 랜더링 할때는 key 값에 id를 붙여준다. key값을 배치하지않으면 동적으로 배열을 쓰지 못한다.

import React from 'react';

function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>
    </div>
  );
}
👉 중복되는 배열 부분은 함수로 만들어준다 
function UserList() {
  const users = [
    {
      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'
    }
  ];

  return (
    <div>
      {users.map(user => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}
👉 map()을 사용해서 반복되는 배열부분을 리턴한다.
export default UserList


* 만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하시면 됩니다.

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

react에서 배열의 요소를 추가하는 법

• concat이나 ...spread를 사용해야한다.
• push등은 사용하면 안된다
  왜냐면 immutable 한 함수를 사용해야지 값이 안변하고 복사가 가능하기 때문이다.

react 에서 배열 제거

• filter 함수 이용하기

react에서 배열 수정

• map함수 이용하기

useEffect

• useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법

1. 화면이 처음 떴을때 실행.

• • deps에 [] 빈배열을 넣을 떄.
• • life cycle중 componentDidmount처럼 실행

2. 화면이 사라질때 실행(clean up함수).

• • componentWillUnmount처럼 실행

3. deps에 넣은 파라미터값이 업데이트 됬을때 실행.

• • componentDidUpdate처럼 실행.

reference from 댓글참조

useEffect에 관한 좋은 블로그

리액트-useEffect