벨로퍼트와 함께하는 모던 리액트

이 포스트는 벨로퍼트와 함께하는 모던 리액트 를 보고 작성하는 강의 정리 포스트입니다.

우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.

리액트에서는 ref 라는 것을 사용한다.

import React, { useState, useRef } from 'react';

const nameInput = useRef();

//nameInput.current는 button을 가르킴!!

<button ref={nameInput}/>

변수관리

컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리

또한 useRef를 이용해 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리가 가능하다.

const nextId = useRef(4);

처럼 컴포넌트 안에서 생성 가능하고

nextId.currnet 로 사용가능하다.
nextId.current += 1 처럼 전역 변수 관가 가능하다.

배열 state, 추가

const [list, setList] = useState([
    {
      id: 0,
      text: "a",
    },
    {
      id: 1,
      text: "b",
    },
    {
      id: 2,
      text: "c",
    },
    {
      id: 3,
      text: "d",
    },
  ]);

추가

const newItem = {
  id: Number(inputs.first),
  text: inputs.second,
};
setList([...list, newItem]);

삭제, 수정

filer기능을 이용!

users.filter(user => user.id !== id)

 setUsers(
  users.map(user =>
    user.id === id ? { ...user, active: !user.active } : user
  )
);

배열 렌더링

map기능을 이용!

return (
    <div>
      {list.map((item, index) => (
        <Item item={item.text} key={index}></Item>
      ))}
    </div>
  );

• map함수를 이용하고, key값을 props로 설정해야 배열요소가 엉키지 않는다.

key 의 존재유무에 따른 업데이트 방식