[React] state, props, key props
props가 뭔데 씹덕아
React에서 props는 속성값을 나타내는 키워드임.
아니 그래서 그게 뭐냐고 ;
일단 이런 식으로 Subject 컴포넌트를 두 개 생성하면 오른쪽 사진과 같이 된다.
Subject는 무조건 WEB world wide web이라는 값만 가지게 되는 건데,
props는 이런 값들을 사용자가 마음대로 바꿀 수 있게 해줌!!
이렇게 Subject의 title과 sub를 설정해주고, Subject.js에서 {this.props.title} / {this.props.sub}로 바꾸면
App.js에서 보내준 title값과 sub값으로 적용된다.
State는 또 뭔데...?
리액트에서의 state는 구글에서 말해준 '상태'와 비슷하다.
props가 컴포넌트에 대한 UI, 즉 사용자가 제품을 조작하는 장치라고 말할 수 있다면
state는 props의 값에 따라 내부 구현에 필요한 데이터다.
그래서 State는 어떻게 사용하쥬..?
아까 title, sub했던 props 값을 state로 만들고 그 state의 값을 Subject의 props로 전달해보겠당.
constructor : 어떤 컴포넌트가 실행될 때 다른 함수보다 먼저 실행됨 -> 초기화를 담당함
*super(props)는 무조건 처음에 써져야 함
-> state를 초기화하고, props 값을 설정한 거임
React 에서
props에서 따옴표("")로 묶음 -> 문자열로 취급
중괄호 ({})로 묶음 -> 자바스크립트 코드로 취급
Subject 컴포넌트의 title과 sub를 this.state.subject에서의 title, sub로 설정한다.
-> 이런 식으로 사용되는 게 state!
아직 state의 기초 중 기초라 이해가 잘 안될 수 있다고 함.
익숙해지는 게 중요!
*외부에서 알 필요가 없는 정보를 철저하게 은닉하는 것, 철저하게 숨기는 것이 좋은 사용성을 만드는 핵심이다.
Key props
state는 여러 개의 값을 다룰 때에는 사용법이 조금 달라진다.
아까 만들었던 state에 contents를 추가해서 id, title, desc를 설정해준다. -> 리스트로 만듦
그리고 TOC 컴포넌트에 data로 이 contents를 넘겨준다.
TOC.js에서 리스트를 만들고, data 변수에 this.props.data를 넣어준다.
-> App.js에선 state이지만 props로 넘겨받았기 때문에 this.props임!
리스트에 li 태그로 title를 넣고 li태그 안에 a태그 href를 /content/id로 하나씩 넣어준다.
아까 만든 contents가 리스트였기 때문에 data.length는 3임
return으로 만들어진 리스트를 보낸다.
이렇게 다 하고 F12 -> console을 보면 이런 메세지를 볼 수 있다.
각 리스트 항목에 key라는 prop이 필요하다는 뜻임.
-> 여러 개의 항목으로 구성된 목록을 자동생성할 때 각 항목을 구별할 수 있는 식별자를 지정해야 함.
li 태그의 key를 data의 id로 설정해주면 오류메세지가 나지 않는다.
이건 그냥 react 내부적으로 필요한 거임. 그러려니 하고 넣어주자.
오늘은 props, state, key props에 대해 공부했다!
아직 이해가 덜 되고 왜 쓰는 거지...? 싶은데, 하다 보면 알게 되겠지 라는 마음으로 공부중이다.
내일도 화이또 👍