[Frontend/React] 8. 컴포넌트의 속성값과 상태값

상태값 (state)

컴포넌트에서 사용할 상태값을 선언하는 방법은 다음과 같습니다.

const [상태값 변수명, 상태값 변경 함수명] = userState(초기값);

 

const [count, setCount] = userState(0);

 

이 상태값을 사용하여 카운트를 1 씩 증가시키는 버튼과 그 이벤트를 선언해 보겠습니다.

우선은 클릭시 카운트를 1씩 증가시키는 이벤트를 정의합니다.

 

function onClick() {
  setCount(count + 1);
}

 

그 다음으로는 위에서 정의한 클릭 이벤트가 반영된 버튼을 정의합니다.

또한, 카운트를 출력하기위한 영역도 별도로 정의합니다.

 

return (
  <div>
    <h2>{`'카운트 :' ${count}`}</h2>
    <button onClick={onClick}>증가</button>
  </div>
)

 

완성된 컴포넌트는 아래와 같습니다. 이 상태값은 Counter 컴포넌트 내에서만 변경할 수 있습니다.

 

export default function Counter() {
  const [count, setCount] = userState(0);
  function onClick() {
    setCount(count + 1);
  }
  return (
    <div>
      <h2>{`'카운트 :' ${count}`}</h2>
      <button onClick={onClick}>증가</button>
    </div>
  )
}

 

---

속성값 (props)

부모 컴포넌트로 부터 전달받은 데이터를 속성값으로 분류할 수 있습니다.

이러한 경우에, 부모 객체가 렌더링 될 때마다 자식 컴포넌트도 다시 렌더링을 하게 됩니다. 하지만 속성값이 페이스북의 좋아요 또는 글의 조회수 처럼 실시간으로 자주 변경되는 경우에는 좋아요나 조회수 영역을 제외하고는 다시 렌더링 할 필요가 없습니다.

 

따라서 이러한 경우에 속도를 최적화 하기 위해서는 React.memo() 함수를 사용할 수 있습니다. 이 함수의 기능은 속성값이 변하지 않은 컴포넌트를 제외하고 나머지가 렌더링 될 수 있도록 도와줍니다.

 

위에서는 h2 태그를 사용하여 카운트를 표시하였는데 이것을 Title 이라는 컴포넌트를 하나 더 만들어서 사용해 보겠습니다.

 

function Title({ title }) {
  return (
  	<h2>{title}</h2>
  )
}

export default React.memo(Title);

 

함수형 컴포넌트의 매개변수로 { title } 이라고 선언한 부분은 props.title 과 같은 의미입니다.

여기서는 Count 라는 부분이 자주 업데이트 되어야 하는 영역이기 때문에 React.memo를 사용하여 해당하는 영역에 대한 데이터가 변경될 때만 렌더링 하도록 처리를 하였습니다.

 

import Title from './Title';

export default function Counter() {
  const [count, setCount] = userState(0);
  function onClick() {
    setCount(count + 1);
  }
  return (
    <div>
      <Title title={`'카운트 :' ${count}`}/>
      <button onClick={onClick}>증가</button>
    </div>
  )
}

 

이전에 선언한 Title 컴포넌트를 사용하여 Counter 컴포넌트 안에서 사용하도록 작성하였습니다. Title 태그를 선언해준 부분을 보면 속성값의 이름을 title 로 명시한 후, = 다음에 값을 집어넣은 부분을 확인할 수 있습니다.

이 부분을 참고해서 Title 컴포넌트에서는 { title } 와 같은 방법을 사용하여 title 속성을 직접 매개변수로 받을 수 있는 것입니다.

 

---

불변변수

속성값은 불변 변수이기 때문에 값을 변경하려고 시도하면 에러가 발생합니다. 자식컴포넌트에 전달하는 속성값은 부모 컴포넌트에서 수정하기 때문에 수정하지 못하게 막고 있습니다.

따라서 속성값을 수정하기 위해서는 부모 컴포넌트에서 변경해야 합니다. 부모 컴포넌트의 상태값은 불변변수가 아니기 때문에 이렇게 자유롭게 변경할 수 있습니다.

 

하지만, 상태값도 불변변수로 다루는 것이 더 좋습니다. 왜냐하면 리액트는 상태값 참조의 변경 유무로 상태를 비교하기 때문입니다. 예를들어 count 객체를 count++ 연산자를 사용하여 증가시키는 경우에는 컴포넌트가 새롭게 랜더링 되지 않습니다.

상태값 객체 자체는 변화가 없고 내부의 값만 변경되었기 때문입니다.

 

count++;

 

이러한 실수를 피하기 위해서는 전개연산자를 활용하는 것입니다. 이 방식은 기존 상태값에 필요한 값만 덮어쓰는 방식입니다.

이 방법을 사용하면 객체 자체가 변경된 것이기 때문에, 리액트에서 상태값이 변경되었다고 인식을 하게 됩니다. 따라서 연관된 컴포넌트가 다시 렌더링됩니다.

 

setCount({ ...count, value: count.value + 1 });

 

 

 

 

---

출처 : 실전 리액트 프로그리맹 - 인프런 (추천합니다 !!)

실전 리액트 프로그래밍 - 인프런