App클래스에 constructor의 값으로 render()내의 값을 주입시켜주면서 자동으로 데이터를 바꾸게 만들겠습니다.
굳이 TOC.js파일에 들어가지 않고도 데이터값이 변하게 만들어 줄겁니다.
1. 배열형태로 만들어주고, key값과 value값으로 만들어줍니다.
contents라는 property를 state에 추가했습니다.
데이터가 여러개 이기 때문에 배열형태로 만들어 줬습니다.
그리고 그 안에 값을 key값과 value 값으로 만들었습니다.
state값을 받기 위해서 this.state.contents로 주입시켜주었습니다.
2. TOC.js 파일로 이동합니다.
우선 내부적으로 살펴봅니다. TOC의 어떤값을 받고 있는지부터 파악합니다.
App.js에서 선언한 내용을 보고 TOC.js에서는 this.props.data로 선언해줍니다.
그리고 반복문을 이용할 것인데, props의 데이터의 값만큼 반복해줍니다.
<li>태그에 담겨있는 데이터를 lists라는 배열 안에 넣어줄겁니다.
그래서 lists.push를 이용하는겁니다.
그러면 <ul>태그안에있는 <li>태그를 또 선언할 필요가 없어집니다.
이로서, 만약 데이터 수정이 있을 경우에 TOC.js파일에 가지 않고 state에서 변경해도 값이 변하게 됩니다. 아주편리한 작업입니다.
3. key값 설정해줍니다.
하지만 주의사항이 있습니다.
이 소스코드는 자동으로 element를 생성하는겁니다. 애러가 발생하게 되는데 이럴때 key값을 설정해줍니다.
왜냐하면 이 목록이 다른것들과 구별할 수 있는 방법이기 때문입니다.
이것은 작업하고 있는 어플리케이션에서 사용하는것이라기 보다는, react가 자신이 내부적으로 필요해서 요청하는 것이기 때문에 그러려니 하고 데이터를 넣어주시면 됩니다.
이로서 총정리는,
render함수에 있는 components들은 상위 에 props값만 알면 되는것이지, 다른 js파일에 내용을 알 필요가 없기 때문에 정말 효율적으로 작업을 하게 되는겁니다.
그리고 어떤형태에 데이터를 전달할지는 props에서 수정하고 보내면 되는것이기 때문에 이것도 또한 효율적이게 되는겁니다.
'React > state' 카테고리의 다른 글
| state 사용 (state값 초기화, props값 설정 ) (0) | 2021.02.05 |
|---|