1/27 일일 정리 States & Props 실습
1/26 ~ 1/27
페어와 함께 React States & Props 실습인 진행하였다.
React Router
이전에 했던 과제들처럼 처음에 컴포넌트들을 연결하고, React Router 라이브러리를 사용하여 페이지별로 주소를 나누어 Link로 이동할 수 있도록 먼저 구현했다.
Props 실습
다음으로 상위 컴포넌트에서 하위 컴포넌트로 props를 내려주는 실습을 해봤다.
더미 데이터의 각 요소들을 화면에 나타낼 껀데 각각의 요소 객체들을 Tweet 컴포넌트의 props로 내려준다. map 메서드를 사용하면 각 요소들을 모두 Tweet 컴포넌트로 나타낼 수 있다.
* key를 지정해 주지 않으면 오류가 발생하기 때문에 키를 꼭 지정해줘야 한다.
Tweet 컴포넌트에는 객체의 데이터를 화면으로 표시할 수 있는 기능이 구현되어있다.
States 실습
States를 사용하면 states 변수가 바뀌었을 때 그 변수에 영향이 있는 화면만 부분적으로 렌더링을 다시 해준다. 이것을 이용하여 tweet을 새로 작성해서 submit 버튼을 클릭하면 새로운 tweet이 가장 위에 추가될 수 있도록 구현 해보았다.
total 부분과 아래에 tweet이 나오는 부분을 다시 렌더링 해야하기 때문에 state를 두 개 만들었다.
초기값으로 isInput state는 dummyTweets(배열)을 줬고, isTotal은 처음에 있는 트위터 개수인 5를 줬다.
이제 submit 버튼을 누르면 두 state가 바뀔수 있도록 함수를 작성했다.
기존 더미 데이터 안의 각각의 tweet 객체와 유사하게 username, id, content, picture, createdAt을 프로퍼티로 지정해서 넣어주었다. id 같은 경우는 넣을때마다 번호가 1씩 올라가도록 해줬다.
그리고 setIsinput함수와 setIsTotal 함수를 사용하여 isInput과 isTotal 변수의 상태를 변경해줬다.
setIsinput 함수에는 새로운 배열을 만들어서 가장 앞에 우리가 만든 tweet객체를 넣어주고, 나머지 원래 더미데이터에 있던 객체들을 붙여주었다.
**중요** 처음에는 그냥 더미데이터에 새로만든 tweet객체를 unshift 메서드로 붙여주고 setIsinput에 바로 더미데이터 변수를 넣어주었다. 그런데 작동을 하지 않아서 고민하다가 알고보니 더미데이터 내부의 값은 변하지만, 참조하는 주소값은 변하지 않기 때문에 isInput 변수가 변하지 않는 것이었다! 따라서 배열이나 객체로 상태를 변경하고 싶으면 새로운 배열이나 객체를 인자값으로 넣어줘야 한다는것을 배웠다. (페어분이 도움을 주셨다.)
setIsTotal 함수에는 현재 isInput의 길이인 tweet.id를 인자로 넣어주었다.
이제 이 handleButtonClick 함수가 실행되면 isInput과 isTotal의 상태가 바뀌고, 바뀐 부분이 다시 렌더링 될 것이다.
그리고 나서 새로운 렌더링을 할 때는 새로만든 배열을 렌더링 해야하기 때문에 위에서 map으로 구현했던 Tweet 컴포넌트를 isInput변수로 다시 작성했다.
그리고 submit 버튼의 속성값으로 onclick 이벤트에 우리가 만든 함수를 전달해줬다.
이제 우리가 tweet을 작성하고 submit 버튼을 누르면 total 값이 바뀌고, 가장 윗 부분에 작성한 tweet이 추가된다.
