들어가기 전에
이번 시간에는 우리가 만든 프로그램을 한번 살펴보도록 하겠습니다.
우리는 지금까지 실습을 통해 페이지가 바뀌지 않고 컨텐츠가 다이나믹하게 바뀌는 웹사이트를 리액트를 구현했습니다.
뿐만 아니라 여러분은 이미 실행하는법, 배포하는법, 컴포넌트를 만드는 법, 그 컴포넌트를 동적으로 만드는 법도 배웠습니다.
이번 시간에는 지금까지 했던 내용의 개념 정리를 해보도록 하겠습니다.
학습목표
리액트를 이해하고 리액트를 활용한 프로젝트를 만들 수 있습니다.
핵심단어
강의 듣기
이번 시간에는 지금까지 실습한 내용에 대한 개념 정리를 해보겠습니다.
헷갈리는 개념들이 있을때 이미지 검색을 많이 사용합니다. react props state 를 검색해보겠습니다.
props와 state의 차이점을 보여주는 이미지입니다. props는 read-only 라고 되어있습니다.
그리고 state는 read-only가 아니고 수정할 때 setState로 바꿀 수 있습니다.
우리 코드에서 <Content>를 사용하는 쪽에서는 title이라는 props를 통해 값을 주입할 수 있습니다.
하지만, 예를 들어 <Content> 내부에서 전달된 title의 값을 'hi'로 바꾸려고 하면 에러가 발생합니다.
그 이유는 <Content> 컴포넌트 안에서 자신에게 전달된 props의 값을 바꾸는 것은 금지되어 있기 때문입니다.
컴포넌트 밖에서만 props를 바꾸는 것은 허용이 되는 것입니다. 이것이 props가 수정할 수 없는 read-only 라는 뜻입니다.
내부적으로 필요한 데이터나 어떤 상태들은 state를 통해서 관리해야 합니다.
props와 state는 모두 render() 함수를 호출하기 때문에 props와 state를 변경해주는 것을 통해서 UI를 바꿀 수 있습니다.
위 그림은 중간에 컴포넌트가 있고 state는 내부적으로 사용합니다. 외부에서는 props를 통해서 컴포넌트를 제어한다는 뜻입니다.
즉 사용자의 props와 구현자의 state가 있고 컴포넌트는 props와 state의 영향에 따라서 어떤 상태가 됩니다.
그 상태가 실제 웹브라우저의 HTML, 다른 말로는 DOM 이라고 하는 것에 영향을 줘서 UI가 그려진다는 것을 보여줍니다.
위 그림에서 리덕스가 없는 순수한 리액트를 다룰 때를 보겠습니다.
위쪽에 있는 동그라미가 상위 컴포넌트 우리 수업에서는 <APP>,
아래 쪽 동그라미는 하위 컴포넌트 우리 수업에서 <Content>, <Subject>, <TOC>에 해당하는 것입니다.
상위 컴포넌트가 하위 컴포넌트로 값을 전달할 때는 컴포넌트의 조작장치인 props를 통해 전달합니다.
하지만 하위 컴포넌트가 상위 컴포넌트의 값을 바꾸고 싶을 때에는 이벤트를 통해서 할 수 있습니다.
<TOC> 컴포넌트의 lists는 data 라는 props를 통해서 전달합니다.
즉 <APP> 이라는 상위 컴포넌트가 내부적으로 사용하는 <TOC>라는 하위 컴포넌트에 값을 전달할 때는
data라고 하는 props의 값을 전달하는 것입니다.
하지만 <TOC> 컴포넌트의 글 목록을 클릭했을 때 상위 <APP> 컴포넌트의 state와 selected_content_id 값을 바꾸고자 한다면
onChangePage 와 같은 이벤트를 구현하고 이벤트가 실행됐을 때 상위 컴포넌트의 state 값을 호출하는 것을 통해서
상위 컴포넌트의 state값을 바꿀수 있습니다.
참고로 리덕스라고 하는 것은 데이터를 각각의 컴포넌트에 분산해서 보관하는 것이 아니라 하나의 데이터 저장소가 가지고
이 데이터 저장소의 값이 바뀌면 바뀐 값과 관련된 모든 컴포넌트가 알아서 바뀌게 하는 기술이라고 생각하시면 될 것 같습니다.
생각해보기
1. props와 state의 차이를 설명해보세요.
2. 하위컴포넌트가 상위컴포넌트로 데이터를 전달할때에는 props의 값을 바꿀수 없기 때문에 이벤트를 쓴다는 것이
무슨 의미인지 설명해보세요.
3. 다른분들의 댓글과 비교하면서 우리 생각을 동기화시켜보세요.
