한 회사의 기술 인터뷰에서 리액트의 key에 대한 질문을 받았다. 해당 질문에 대한 대답을 하는 과정에서 그동안에 프로젝트를 진행하면서 리스트의 각 항목에 key를 할당하는 것을 너무 당연시한 것 같다는 생각이 들어 이에 대해 알아보려고 한다. 배열에서 데이터 렌더링 const people = [ { id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', }, ]; export default function List() { const listItems = people.map((person) =>..

🔥 발생한 문제 텍스트를 입력하고 엔터(Enter) 키를 누르면 목록에 새롭게 추가되고 input 창은 비워지도록 구현했는데 왠지 모르게 함수가 두 번 실행되면서 기존 텍스트의 마지막 글자가 목록에 추가되는 문제가 발생했다❗️ 원인 분석 검색해본 결과 이러한 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다. (영어로 입력하면 키 이벤트가 중복으로 발생하지 ❌) 구체적으로 위 GIF를 보면 한글 입력 시 입력 중인 글자 아래 검은 밑줄이 생기는데 해당 밑줄이 있는 상황에서 키 이벤트가 발생하면 함수가 두 번 실행되는 문제가 발생한다. 한글의 경우 자음과 모음의 조합으로 만들어지는 조합 문자이기 때문에 글자가 조합 중인지 조합이 끝난 상태인지를 알 수 없어 생기는 문제이다. 🧯 해결 방법 ..

🔥 발생한 에러 Uncaught Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft. 에러를 번역하자면 immer 제작자는 새로운 값을 리턴하거나 기존 상태를 수정하거나 둘 중 하나만 해야된다는 것이다. 원인이 되는 코드 분석 immer 라이브러리를 사용하여 불변성 상태의 트리를 손쉽게 변경하던 중 위와 같은 에러가 발생했다. updatePerson((person) => person.mentors.push({ name, title })); 화살표 함수는 중괄호를 써주지 않으면 자동으로 return 키워드가 붙는다. 즉, 위의 코드는 기존..

🚨 오류 발생 AxiosError message: 'Network Error' const userInfoPatch = async (userInfo) => { try { // url: 서버 주소, id: 사용자 아이디, userInfo: 사용자 정보 객체 await axios.patch(`${url}/member/${id}`, userInfo).then(() => { alert('수정이 완료되었습니다.'); }); } catch (error) { console.log(error); } }; 클라이언트 코드에서는 별다른 문제가 없어 보였고, 서버 측에서 분명 접근을 허용하는 메서드로 PATCH에 대해 따로 처리를 해주었다. 프로젝트를 진행하면서 GET, POST, DELETE 등 여러 방식으로 서버에 요청할..

🚨 오류 발생 AxiosError message: 'Request failed with status code 400' axios.delete(`${url}/unlike`, { projectId: id, }) axios의 delete를 사용하여 서버에 요청을 할 때, 다음과 같이 data를 전달하면 오류가 발생한다. 💡 해결 방법 axios.delete는 request body를 지원하며 다음과 같이 두개의 매개변수를 허용한다. axios.delete(url[, config]) 👍 config.data는 request body를 설정하는데 사용할 수 있다. axios.delete(`${url}/unlike`, { data: { projectId: id, }, }) 2번째 인자에서 data를 data: {}..

SPA 기법을 그대로 유지한 상태로 REACT에서 페이지 이동 처리하는 방법으로 React Router가 사용된다. 라우팅이란? - 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각하면 쉽다. - 리액트에는 라우팅 관련 라이브러리가 존재하는데, 그 중 리액트 라우터(React Router)를 사용해보려고 한다. React Router(리액트 라우터)란 무엇인가? - 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. 종류 - BrowserRouter: HTML5를 지원하는 브라우저의 주소를 감지한다. - HashRouter: 해시 주소를 감지한다. React Router(리액트 라우터) 사용해보기! (❗ ..

SPA를 설명하기 전 SPA를 왜 사용하는지? 전통적인 웹 사이트는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링 하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않으며, 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하므로 굉장히 비효율적이다. 웹 사이트의 규모가 커질수록 서버쪽에선 과부하가 걸릴 수 밖에 없다. 그 만큼 속도적인 측면에서 사용자는 불편함을 그대로 느끼게 된다. 틀릴확률이 높은 개인적인 지식(수정 가능성 높음❗) Traditional Page Lifecycle HTML → CSS → DOM → Web browser SPA Lifecycle HTML → CSS → Virtual Dom → DOM(필요 요소만 변경) → Web browser..

PureComponent & memo Component에 state나 props에 변화가 없다면 render 함수가 호출되지 ❌ React.PureComponent React.PureComponent는 React.Component와 비슷하다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교(레퍼런스만 비교해서 안에 데이터가 달라져도 동일한 오브젝트)를 구현한다는 차이점만이 존재한다. 참조값이 동일하면 업데이트 ❌ => ShouldComponentUpdate 함수는 false를 리턴 React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌..