생활코딩 : React - State 소개, 사용, key (15강)

props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것

state : props의 값에 따라서 내부의 구현에 필요한 데이터들이다, 복잡한 컴포넌트 만들 때 사용

 

 

---

State 사용

State 값 초기화 : render() 보다 먼저, constructor()함수 이용해서 코드를 짠다

 

constructor에서

this.state ={} : 초기화

subject: {title:'WEB', sub: 'World Wid Web'} : subject의 값을 스테이트화 시킨다

 

Subject 컴포넌트에서

<Subject title={this.state.subject.title}> : 리액트에서 코드를 인식하게 하려면 { }를 쓴다

 

외부에서 볼 수 없게 철저히 은닉하는 것이 좋은 사용성이다.

 

상위 컴포넌트의 state를 하위 컴포넌트로 props로 전달 가능하다.

 

 

 

---

<App.js 파일 안>

this.state ={} 안에서

contents: [] 배열을 만들었다

 

 

 

<TOC.js 파일 안>

<TOC data={this.state.contents}> : contents 배열을 TOC 에 주입시킨다

 

TOC 컴포넌트 안에서

this.props.data : TOC는 data라는 props를 가지고 있다고 보여준다.

var list = [ ]; 리스트를 배열로 만든다

while 반복문이 계속될 때마다 list를 push해준다.

 

while 반복문 안에서 아래구문을

이렇게 바꿔준다

id값, 제목값을 출력한다.

 

원래 리스트가 있던 return() 영역 태그에 {lists}라고만 써도 된다.

 

결과: 데이터가 바뀌었다고 TOC.js 파일에서 로직을 바꾸지 않아도 된다. 

App.js 파일에서 데이터 수정만하면 된다. 편리하다.

 

여러개의 목록을 자동으로 생성할 때, 에러생긴다. (key props가 필요하다는 에러.)

li 태그 안에

<li key = {data[i].id}> 라고 적어준다

 

즉

부모입장인 App에서는 State라는 내부정보 이용했다.

자식에게 전달할 때는 data라는 props를 통해 전달한다. (사용자가 이용할 만큼의 정보만 여기서는 보여준다)

자식입장인 TOC에서는 props를 받아와서 반복문으로 리스트를 간편화하고, App의 State를 이용한다.