"React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render." 최근에 리액트로 팀 프로젝트를 하면서 Invalid hook call 에러나 위와 같은 Eslint error를 종종 봤는데요.매번 아차차 하고 넘어갔던 에러이지만, 왜 훅이 렌더링 될 때마다 같은 순서를 유지해야 하는지 궁금해서 찾아보다가 좋은 참고 자료를 발견하고 이 글을 쓰게 되었습니다. 리액트 공식문서에는 훅의 규칙을 명시하고 있는데, 일단 훅이란 뭔지 간단히 설명해 볼게요. Hook 이란?함수 컴포넌트에서 상태와 생명주기 기능을 "연동"(hook)할 수 있게 해주는 특별한..
❕❕리액트를 공부 중인 초보자의 코드입니다. 잘못되었거나 개선할 사항이 있다면 댓글 부탁드립니다. 진행 중인 프로젝트에서 댓글 CRUD를 구현하였다. 그 중 댓글을 수정하는 부분이 조금 까다로웠는데, 내가 구현하고자 했던 수정기능은 아래와 같다. 1. 수정버튼을 클릭하면 댓글 수정 박스가 나타난다. 2. 다시 수정버튼을 클릭하면 수정 박스가 사라지고 댓글 수정이 취소된다. 처음에는 단순히 댓글의 수정상태를 설정해서 댓글수정 박스가 보이도록 했는데, 그러면 모든 댓글의 수정상태가 통일되어서 수정 중인 댓글의 수정버튼이 아닌, 다른 댓글의 수정버튼을 눌러도 수정이 취소되는 오류가 발생했다. (왜냐하면, 서버에서 전체 댓글 데이터를 배열로 받아 map()으로 요소를 한 개씩 받아서 동일한 작업을 수행하도록 구..
