1. 문제 발생🤯
01. 어라? 왜 빈칸이세요?
React에 첫발을 들이자마자 밀려오는 강의와 라이브세션과 과제에 허우적이며 React 첫 프로젝트를 시작되었다. 이번 프로젝트는 파리 올림픽 참여 국가와 메달 수를 입력받아 정렬하는 웹사이트를 제작해야한다. 강의에서 배운 React 컴포넌트, 이벤트 관리, 상태(state) 관리를 통해 CRUD 기능을 구현하는 것이 목표이다.
강의를 들으면서 따라 친 코드도 참고하고, React 공식 문서와 구글링으로 어찌저찌 기본 UI 틀을 만들 수 있었다. 그리고 CRUD 기능에서 CR까지 구현해보는 것이 오늘 목표였기에 호기롭게 도전해보았다.
input태그에 값을 넣고 ADD 버튼을 클릭했더니, 추가되었다는 알람창이 떠서 뭔가 설레였다.
하지만 쉽게 성공하면 개발새발 밍갱이 아니지...ㅎ 분명 input태그에 값을 하나하나 넣어줬는데, 왜 값이 하나도 들어가지 않은 객체가 localstorage에 저장된걸까. 한국 메달 돌려내라 요놈아😭
2. 원인 추론🧐
01. console.log로 문제 파악하기
input태그의 value가 넘어오지 않는건가 싶어서 만능 console.log로 input 값을 추적해보았다.
input 값은 정상적으로 찍히고 있었다. 그렇다면 이 값이 어디선가 넘어가지 않는 상황인 것 같은데, 어떻게 넘겨줘야할까?
02. 이전 문제 해결 후 코드 변경시 실수?
사실 이 문제가 있기 전, ADD 버튼을 한번 클릭하면 알람창만 뜨고 두번 클릭해야 localstorage에 저장되는 문제가 있었다. 이를 해결하기 위해, 튜터님의 도움을 받았다.
React는 batch update를 하기 때문에, setState() 메서드로 변경된 값이 바로 적용되지 않는다. 따라서 추가되어야 할 객체를 미리 담은 배열을 변수로 정의하고, setState() 메서드로 변경 + localstorage에 추가하는 방법으로 개선했다.
*batch updatde란? : 컴포넌트가 여러 번 업데이트 되더라도, 실제 DOM 요소에 변경사항을 적용하는 것을 최소화하여 애플리케이션의 성능을 최적화하는 기능
이 과정에서 튜터님께서 추가 로직은 사실 부모 컴포넌트(App.jsx)에서 만들어 자식 컴포넌트(Header.jsx)에 넘겨주는 것이 더 효율적이라는 피드백을 주셨다. 그래서 addCountry() 함수를 App.jsx 파일로 옮겨주었는데, 여기서 문제가 발생한 것 같다.
3. 해결 방안😇
01. state의 중복
얼떨결에 대환장 라이브 코딩쇼가 되어버렸지만, 다른 동기분들의 도움 덕분에 해결할 수 있었다. 우선 App.jsx와 Header.jsx에 둘 다 선언해놓은 state가 문제였다.
addCountry() 함수를 App.jsx로 넘기면서 프로퍼티가 선언되지 않았다는 console error에 무작정 둘다 선언했는데, 사실은 저 두개의 state 값이 모두 다르다는 것을 모르고 있었다.
02. addCountry()함수의 인자값 설정
App.jsx에서 state를 삭제하니 프로퍼티가 선언되지 않았다는 에러가 떴다. 이를 어떻게 해결할까?
함수의 인자로 받으면 된다! 이 인자들은 addCountry() 함수가 실행될 때, 값이 설정될 것이다.
03. Button 컴포넌트 수정
이제 addCountry() 함수를 수정했으니, App.jsx에서 Header.jsx로 넘겨주면 된다. 하지만 그 전에, Header.jsx의 자식 컴포넌트인 Button.jsx를 잠깐 손봐주었다. Button 컴포넌트를 클릭하면, addCountry() 함수가 실행되어야 하기 때문이다.
처음 작성한 코드이다. 굳이 버튼을 두개 넣어서 만들었는데, 동기분께서 버튼을 하나로 만든 뒤 재사용하면 된다는 피드백을 주셔서 전면 수정에 들어갔다.
수정한 코드이다.
04. addCountry()함수를 Button 컴포넌트에 넘겨주기
자, Button.jsx까지 수정했으니 이제 Button 컴포넌트에 addCountry() 함수를 넘겨주면 된다.
값이 변화(추가) 되는 곳이 Header.jsx이기 때문에, 여기에 state를 선언해주었다.
그리고 input태그의 value를 setState() 메서드로 넘겨주었다.
마지막으로 ADD버튼이 클릭될 때, setState() 메서드로 넘겨진 값들을 인자로 받은 addCountry() 함수가 실행되도록 작성해주었다.
4. 결과😎
01. 해결!
localstorage에 값이 제대로 저장되었다! 그리고 하단 UI도 정상적으로 출력되고 있다!
혹시나 싶어 다른 나라들도 추가해보았다. input태그에 입력한 value가 정상적으로 localstorage에 저장되는 것을 보니 코드가 잘 수정된 것 같다.
이번 트러블은 내가 아직도 함수의 개념이 부족했기 때문에 발생한 것이다. 시간이 날 때, 틈틈히 함수 부분을 복습해야할 필요가 있다.
02. 최종 코드
-
App.jsx의 addCountry() 로직
-
Header.jsx의 state와input
Header.jsx의Button
Button.jsx
