[React] props와 state, component 기초 개념 및 예제

혼자 학습 후 개념 정리를 위한 글이다. 편하게 참고하고 틀린 부분은 댓글에 남겨주면 감사할 따름이다.

깊은 개념의 이해라기보다는 사용할 정도의 개념이다.

아래 코드들을 보면서 설명을 해보겠다.

App.js의 상단

일단, 주석을 읽어보고 시작하자.

import React는 리액트를 사용한다면 필수이다.

아래 import한 TOC, Content, Subject는 from 뒤에 있는 파일의 위치에 존재하는 component를 사용하게 해 준다.

이렇게 선언해 주면 <TOC>, <Content>, <Subject>와 같은 태그를 사용할 수 있게 된다.

즉, Component는 HTML, CSS 등 동일 코드가 반복되는 부분을 하나의 단위로 만들어 놓은 것을 만한다.

class 안의 constructor는 초기화를 담당한다고 보면 된다. component가 실행될 때 아래 그림의 render보다 먼저 실행된다. 

"//state 값 초기화"라는 부분 아래를 보면 subject라는 property를 state에 추가해주는 부분이다.

즉, state는 컴포넌트 내에서 동적으로 변동되는 데이터를 관리하며, 언제나 기본 값을 미리 설정해야 사용할 수 있는 존재이다.

App.js 하단

props는 Properties의 줄임말이다. 사용자가 컴포넌트에 전달해서 사용하고자 하는 데이터이다.

render(){} 부분을 보면 <Subject> 컴포넌트에 title이 props이다. title이라는 props에 state의 값을 주입하는 것이다.

(this.state.subject.title은 state안에 subject, 그곳에 속한 title을 의미한다.)

위 [그림 App.js 하단]의 1번 Subject는 첫 번째 그림에서 state을 가져오는 형태이고, 그 아래 2번 Subject는  component에 주어지는 데이터를 Subject라는 component에서 {this.props.title}이라는 형태로 받아서 사용하게 된다. 이 내용은 아래에 [그림 <Subject>]이다.

<Subject> Component 만들기

[그림 App.js]의 3번 TOC를 살펴보자. 맨 위의 [그림 App.js의 상단]에서 state안에 contents를 선언했었다(바로 아래에 그림을 가져다 놨다). 그 props를 TOC component에서 살펴보겠다.

App.js의 상단부에서 state초기화 부분

TOC component 만들기

위의 [그림 TOC component 만들기]는 반복문을 사용해서 배열에 담겨있는 여러 개의 목록들을 lists라는 배열에 담아 쉽게 표현했다.