정말 제대로 이해하기 힘들었던 그리고 힘든 리엑트의 state와 props를 정리해 보고자 한다.
💡내가 파악한 개념을 정리 하자면
state
컴포넌트에 선언된 값, this.setState를 통해 추가, 변경이 가능하고 랜더링이 다시 된다.
props
부모 컴포넌트에서 받아온 값으로 값의 형태는 배열, 객체, 함수, 컴포넌트 등 다양하다. 읽기 전용 속성으로 값만 받아온다.
사실 이와 관련해서 찾아보고 읽어보고 실습해보고 몇번을 봣던 글이지만 이번주 내내 나를 괴롭히다 어제 처음으로 제대로 '읽혔'다고 할까나? 같은 코드인데 이해가 되고 대략적으로나마 활용 방법이 생각났다. 사실 저 단순 활용만 놓고 보면 어려울건 없는데 여기에 객체와, 배열과, 함수가 겹쳐지자 너무 헷갈렸다. 처음에 리엑트 시작할 때 이 개념에서 다들 힘들어한다고 들었지만 정말 별거 아닌데 힘든건 사실.... 으읔 지금도 뭔가 소홀하면 다시 흩어져 버릴 거 같아 현재 진행하는 위스타그램 댓글 구현 기능을 정리하고자 한다.
먼저 코드를 살펴보면
this.state = {
newComment: '',
comments: [],
};새로운 댓글이 담길 newComment와 리스트로 생성할 배열(comments)을 state로 만들고 (정리하면서 드는 생각은 굳이 newComment를 선언할 필요가 있을까 싶은... 바로 comments에 넣으면 되지않을까?... 리펙토링을 해보면서 익혀봐야겠다.)
addComment = () => {
const newComment = this.state.newComment;
this.state.comments.push(newComment);
this.setState({
comments: this.state.comments,
newComment: '',
});
};새로운 댓글을 textarea의 onChange이벤트를 통해 받아와서 위의 addComment함수를 통해 commnets state에 setState시켜 준다.
사실 처음에 이 함수를 참고하면서 이해한적이 한번도 없는데 어제 분명하게 이해가 되서 좀더 수월하게 작성 했던 것 같다. (이해의 큰 도움이 된건 첫줄의 const newComment는 비구조화 할당이란 것!!!!)
마지막으로
{comments.map((value, index) => {
return <CommentsList key={index} text={value} />;
})}새로운 댓글이 setState로 인하여 다시 랜더링이 이루어 질때 comments 배열을 map매서드를 활용해 추가된 댓글을 표현 해 주었다. 이 때 자식 컴포넌트를 활용해 새로운 댓글을 props로 넘겨 주었다.
const { text } = this.props;
return (
<li>
{text}
</li>
);음... 사실 정말 별거 없는데 여기까지 제대로 이해하기가 너무 어려웠던게 신기할 정도... 앞으로 해야할게 산더미지만.. 이번주 정말 좌절 직전까지 갔었는데 다시 힘내봐야겠다.. 정말 턱걸이로 해나가는 느낌이지만.. 멈추지 않으면 완주 할 수 있지 않을까?.. 역시 뭔가 감정이 바닥을 치고 다시 올라오는거 같은..... 어찌되었는 결국 하루하루 열심히 해보는수 밖에..!
