본문 바로가기

React

TIL 19 Props로 받은값 State로 넘기기

컴포넌트에서 Props로 받은값을 state에 저장하는걸 구현해봤다. 

 

코멘트를 map으로 돌려서 구현한 모습이다

 

각 코멘트에 들어가있는 유저이름 코멘트 내용 좋아요 갯수를 mock데이터로 받아서 구현한 것이다.

 

 

코멘트는 <CommentIndividual /> 컴포넌트이다. commentInfo라는 props값들을 받아서 해당 컴포넌트에서

뿌려주는 형태이다. CommentIndividual을 보면 

 

 

render부분은 제외한 코드인데 중요한건 componentDidMount을 보면 된다. state에 likeNumber값은 0으로 두고

리액트의 라이플 사이클 render()함수가 끝마치고 실행되는 componentDidMount를 보면 likeNumber을 props로 

받아온 commentInfo.like_number로 바꿔 줄 수 있다. 바로 props의 값을 state값으로 갱신한것을 볼 수 있다.

저렇게 하지않고 바로 constructor에 내부에 값을 넣어주면 오류가 나온다.