React props, state 🏔

React에서 props와 state는 어떤것을 의미할까요???

 

우선

props와 state는 둘다 정보를 가지고 있는 일반 javascript 객체 입니다.

props와 state는 렌더링 결과물에 영향을 주는 정보를 가지고 있습니다.

하지만 props는 외부에서 전달을 받고 state는 컴포넌트 내부에서 관리됩니다.

 

props는 같은 input에 같은 output을 반환해 줍니다.(순수함수 같네요)

function Welcome(props) {
  return <div>welcome {props.name}</div>
}

props는 외부에서 정의되어 내부 컴포넌트로 전달됩니다.

 

---

state는 컴포넌트 내부에서 관리되어지는 렌더링에 영향을 주는 정보를 가지고 있는 자바스크립트 객체입니다!!

 

state는 컴포넌트 내부에서 정의되고 관리됩니다.

state의 변경은 리렌더링을 유발합니다!

state는 자식 컴포넌트에 props로 전달될 수 있습니다.

 

function Welcome() {
  const [name, setName] = useState('test');
  
  return <NameCard name={name} />
}

function NameCard({name}){
  return <>Welcome {name}</>
}

 

그러므로 렌더링을 유발시킬 수 있는 값은 state로 정의되어야 합니다!

최소한의 state를 알맞게 정의하는 것이 React 상태관리에서의 핵심입니다!

props로 전달되는 state로 부터 파생될 수 있는 값들은 state로 정의하지 않는 것이 불필요한 state의 생성을 방지할 수 있는 방법이라 생각합니다.

 

 

 

 

출처 :

https://ko.reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props

컴포넌트 State – React

https://lucybain.com/blog/2016/react-state-vs-pros/

Lucy Bain