이전 시간까지 컴포넌트를 만들고, 이벤트도 만드는 등 여러가지를 공부했다.
생코님은 그동안 배운 내용을 바탕으로 기억해야할 핵심내용을 정리했는데 나도 따로 정리하려고 한다.

props와 state의 차이점

: 둘의 차이점을 알고 리액트를 사용하는 것이 중요하다.

일전에 App 컴포넌트에서 Content 컴포넌트를 이용해 title, desc라는 props를 통해 값을 입력했다.

<Content title={_title} desc={_desc}></Content>

그렇다면 아래처럼 코드를 변경해서 Content 컴포넌트에서 이 값을 바꿀 수 있을까?

class Content extends Component {
	render(){
    	this.props.title = "hi";
    }
}

NO.

바꿀 수 없다.

컴포넌트 안에서 외부에서 전달된 props의 값을 바꾸는 것은 금지되어있다.

책에서 강조하길 props는 읽기전용(read only)이다.

하지만, 컴포넌트밖에서 props를 바꾸는 것은 당연히 허용된다. 컴포넌트 내부적으로 필요한 데이터나 어떤 상태들은 state를 통해 관리한다. 그리고 생코님은 props와 state 모두 render 함수의 호출을 유발하기 때문에 이 값들을 바꾸는 것을 통해 UI가 바뀌는 작업은 props와 state를 적당히 수정하는 방식으로 할 수 있는게 리액트의 핵심이라고 했다.

위 그림을 보면, state가 컴포넌트 내부적으로 쓰이고, 외부에서 props를 통해 컴포넌트를 제어하는 것을 알 수 있다. 그림을 통해 생코님은 컴포넌트의 사용자가 지정한 props와 구현자가 지정한 state가 있다는 것을 말해주셨다.

그리고 이렇게 해서 컴포넌트가 props와 state 영향에 따라 어떤 상태가 될텐데, 그 상태가 실제 웹브라우저의 HTML, 즉 DOM이라고 하는 것에 영향을 줘서 UI가 그려진다고 한다.

그리고 순수한 리액트를 다룰때는(Redux가 아닌 상태_나중에 배운다고 한다) 상위컴포넌트가 하위컴포넌트로 값을 전달할때는 props를 통해 전달하지만 하위컴포넌트가 상위컴포넌트의 어떤 값을 바꾸고 싶다면 이벤트를 사용한다고 한다. props가 읽기 전용이기 때문에.

앞에서 실습했던 App 컴포넌트와 하위 TOC 컴포넌트를 보면, 글목록리스트를 props를 통해 전달하는 것을 알 수 있다.(data={this.state.contents}) 즉, 상위 컴포넌트인 App 컴포넌트가 내부적으로 사용하는 하위 컴포넌트 TOC 컴포넌트에 값을 전달할 때는 data라고 하는 props에 값을 전달한다.
하지만 TOC의 목록 중 하나를 클릭해서 상위 컴포넌트인 App 컴포넌트의 state를 변경하려고 하면, 이벤트함수(onChangePage함수에서 setState호출)를 구현하는 것으로 상위컴포넌트 App 컴포넌트의 state를 바꿨다.

💡 정리 :
상위컴포넌트가 하위컴포넌트에게 명령할땐 props를 사용하고, 하위컴포넌트가 상위컴포넌트에게 명령할땐 이벤트를 사용한다.

그리고 짧게 Redux에 대해서 설명했는데,
Redux는 각 컴포넌트에 데이터를 분산해서 보관하는 것이 아니라 하나의 데이터 저장소가 있어서 데이터 저장소의 값이 바뀌면 해당 값과 관련된 모든 컴포넌트가 알아서 바뀌게 하는 기법 이라고한다. 책의 마지막에서 다룬다고 하니 빨리 배워서 위의 편리함을 어서 습득해야겠다.

출처: 생활코딩! 리액트 프로그래밍 책