[TIL] React State 관리

양주영·2021년 11월 18일
0

TIL

목록 보기
11/13

강의를 듣다가 혼자 해결해보고 싶은 부분이 있어 해결방안을 TIL로 기록해본다.
위와 같이 각각 따봉을 눌렀을 때 각각 별개의 숫자가 1씩 증가하고 싶은 경우를 생각해보자.


const [따봉, 따봉변경] = useState([0, 1, 2]);


function 각각따봉(idx) {
    // 불변성: 원본을 건들지 않는다.
    const new따봉 = [...따봉];
    new따봉[idx] += 1;
    따봉변경(new따봉);
  }

{글제목.map(function (, idx) {
        return (
          <div className="list">
            <h3>
              {글제목[0]}
              <span
                className="button"
                onClick={function () {
                  각각따봉(idx);
                }}
              >
                👍
              </span>
              {따봉[idx]}
            </h3>
            <p>1120일 발행</p>
          </div>
        );
      })}


막혔던 부분 >
state를 각각 관리하고 싶었는데, 그렇다고 각각 개별적인 state를 관리하는 건 효율적이지 않다고 생각했다. 그래서 맨 위에 초기값을 배열 [0,1,2]로 넣어줬고, 각각의 index를 도는 for문을 돌려야 하나 싶었다. 하지만, 확실한 방법이 필요했다. 바로, 각각의 따봉 인덱스를 누르면 1씩 증가하는 함수를 만들어주는 것이다. 이는 리액트의 특징인 불변성을 정확히 알아야 가능하다.

💡 불변성이란...
React Component가 리렌더링 되는 조건은
1. props, state의 값이 바뀌거나
2. 부모 컴포넌트가 리렌더링될 때가 있다.
여기서 React ComponentPropsState의 값이 바뀔 때 바뀌었는지 안 바뀌었는지 어떻게 확인할까?
이전 값과 현재 값을 전체적으로 비교한다고 가정할 때, 하나하나 비교하는 방법은 비효율적일 것이다.
따라서, React에서 값을 비교할 때는 얕은 비교를 실행하여 성능 최적화를 만들어내게 된다.
때문에 불변성을 지켜주는 일이 중요하다.



해결방안 >
각각의 초기값은 배열로 useState() 함수에 넣어준다.
그리고 각 따봉들을 변경해 줄 로직이 포함된 각각따봉 함수를 생성해준다.
여기에서, 리액트의 특징 중 하나인 불변성을 고려해야 한다.
따봉 즉, 초기값 [0,1,2]을 먼저 복사한 후, 새로운 new따봉이라는 변수에 +=1을 할당하여 따봉변경 함수에 넣어준다.

그리고 이 함수는 따봉이 눌렸을 때 실행할 수 있도록 함수자체를 span 태그에 onClick으로 넣어준다.





profile
뚜벅뚜벅

0개의 댓글