[React] state와 props 차이

🤔 state와 props는 뭘까?

React를 공부하면 항상 언급되는 state와 props.
state와 props는 렌더링에 영향을 미치는 중요한 요소이다.
컴포넌트에 어떤 것을 사용해야할 지 알기 위해
이 두 가지 요소에 대해 정리해보자.

1. state와 props의 개념

두 요소의 공통적인 요소는 자바스크립트 객체로,
렌더가 업데이트되도록 하고 두 요소에 같은 값을 주었을 때
같은 결과물을 보여준다.

아래에 예시로 정확하게 둘의 개념에 대해 알아보자.
함수형 React 컴포넌트이며 lang의 값이 ko이면 '안녕하세요'를 출력하며
다른 값이면 'Hello'를 출력한다.

• hook를 사용하여 state lang에 ko 를 저장하여 사용.

// state값으로 출력
const App = () => {
	const [lang, setLang] = useState('ko');
    
	return <div>{lang === 'ko' ? '안녕하세요' : 'Hello'}</div>;
};

• Hello 컴포넌트에 props lang에 ko를 전달.

// props값으로 출력
const App = () => {
	return <Hello lang="ko" />;
};

const Hello = (props) => {
	return <div>{props.lang === 'ko' ? '안녕하세요' : 'Hello'}</div>;
};

위의 두 개의 예시 모두 '안녕하세요'라는 텍스트를 담은 div태그를 렌더한다. 이와 같이 두 요소는 모두 렌더를 업데이트하고 같은 값을 주었을 때 동일한 html을 생성하게 된다.

2. state vs props

공통점을 알았으니 차이점에 대해서도 공부해보자.

• props
  • properties의 줄임말.
  • 부모로부터 상속받는 값이면서 자식에게 내려주는 값.
  • 전달받는 시점에 props는 불변(immutable)의 값.
  • 불변의 값이므로 컴포넌트에서 바꿀 일이 없는 변수라면 props 사용.

    const App = () =>  <Hello hello="안녕하세요." />
     const Hello = (props) => <div>{props.hello}</div>

    
    
• state
  • 컴포넌트 내에서 관리되는 값.
  • 컴포넌트가 mount되는 시점에 초기값 설정.
  • setState를 호출하여 state 변경.
  • 컴포넌트에서 변경할 필요가 있는 변수라면 state 사용.

    const App = () => {
      const [heallo, setHello] = useState('hello');
      const changeHello = () => setHello('안녕하세요.');
      
      return (<div>
      	<Hello hello={hello}/><button onClick={changeHello}>번역</button>
      </div>)
    }
     const Hello = (props) => <div>{props.hello}</div>

🍑오늘의 공부 일기

React 개발을 하면서 무의식적으로 컴포넌트에 값을 전달했었다.
state와 props의 개념을 공부하면서 변수의 불변성과 렌더링에 대해서
한번 더 생각하게 되는 계기가 되었고 이를 염두하면서 개발에 임해야겠다.

참고 자료
https://ko.reactjs.org/docs/faq-state.html
https://lucybain.com/blog/2016/react-state-vs-pros/
https://github.com/uberVU/react-guide/blob/master/props-vs-state.md