리액트 컴포넌트에서 다루는 두 가지 타입의 데이터, props와 state에 대해 정리해 보겠습니다.
Props
react는 데이터가 부모컴포넌트에서 자식컴포넌트로 데이터흐름이 발생하는 단방향 데이터흐름이 특징입니다.
부모 컴포넌트는 자식 컴포넌트에 props값을 전달하며 props 값을 받은 자식 컴포넌트는 이에 관한 부분들을 렌더링 합니다.
그리고 부모 컴포넌트에서 전달하는 props값이 바뀌면 update가 발생해서 re-render됩니다.
클래스 컴포넌트에서 부모 컴포넌트로부터 받은 props 값에 접근할고싶을때는
this.props.value //value는 부모에서 props을 값을 보내줄때 지정한 이름이런 식으로 접근해야합니다.
함수형 컴포넌트에서는 인자로 받아온 props를 비구조화할당 방식으로 적어서 바로 사용할수있기때문에 훨씬 편리합니다.
주의할점
자식 컴포넌트에서 부모가 보내준 props를 변경하고 싶어서
부모컴포넌트가 자식컴포넌트에 props와 props를 변경할수 있는 메서드를 같이 속성으로 주게되면,
자식컴포넌트에서도 props 값을 변경할수 있지만 이는 리액트의 단방향 데이터flow규칙에 위배되기때문에 이러한 방법은 사용하지않는것이 좋다고 생각합니다. (이는 개인적인 의견임)
State
컴포넌트 내에서 동적인 데이터를 다룰때는 state를 사용하면 됩니다.
클래스 컴포넌트에서 state를 사용하려면 constructor메서드 내부에
this.state = {
number:0
}이런식으로 선언해주면 됩니다. 그리고 state값을 변경하고 싶을때는 state에 값을 직접 넣어주면 안됩니다. 왜냐하면 state값을 직접 변경하게 되면 react는 변화를 감지하지 못하고 re-rendering이 발생하지 않기때문에 변경사항이 dom에 반영되지 못합니다.
state값을 변경하고 싶을땐 setState메서드에 변경하고자 하는 값을 넣어줘야 합니다.
this.setState({
number:this.state.number+1
})이런식으로 해줘야 state값이 변경되었다고 감지되어 update됩니다.
주의할점
setState메소드는 즉시 실행되는 것이 아니라 하나의 요청이라고 생각해야 합니다.
즉, setState를 통해 상태를 변경하더라도 해당 메소드가 실행된 직후에 변경된 상태가 적용되는 것이 아닙니다.
그래서 즉각적으로 값이 변하게 하고싶으면 setState에 객체대신 함수를 전달하면됩니다.
아래의 예시를 보면
// this.state.value is initially 0
this.setState({value: this.state.value + 1});
this.setState({value: this.state.value + 1});
this.setState({value: this.state.value + 1});
// this.state.value is 1 instead of 3한번에 여러개의 setState를 통해 state를 변경하려 하면 리액트는 이것을
하나로 합쳐서 변경합니다.
그리고 하나로 합칠때에는 같은 키값이 있으면 가장
마지막의 변경 내용을 적용하기때문에 3번의 setState를 호출해도 this.state.value의 값은 1이됩니다.
만약 이전의 상태에 기반하여 상태를 변경해야 한다면 가장 좋은 방법 중 하나는 updater 함수를 사용하는 것입니다. updater함수를 setState 메소드의 첫번째 인자로 넘기는 방식으로 사용할 수 있습니다.
// setState(updater, [callback]);
this.setState((prevState) => ({value: prevState.value + 1}));// this.state.value is initially 0
this.setState((prevState) => ({num: prevState.num + 1}));
this.setState((prevState) => ({num: prevState.num + 1}));
this.setState((prevState) => ({num: prevState.num + 1}));
// this.state.value is 3
updater는 state와 props를 인자로 받아 state를 변화시키는 함수 인데,
updater에 인자로 주어지는 state는 와 props는 최신상태로 보장됩니다.
