라우팅을 쓰는 이유 리액트로 일기 어플리케이션을 만들면 [메인] [일기 쓰기] [일기 보기] [수정하기] 와 같이 여러 페이지가 필요할 것이다. MPA인 바닐라 JS라면 여러 개의 html 파일을 만들어 이동을 시킬 수 있겠지만, 리액트는 하나의 html 파일만을 유저에게 보여주는 SPA다. 즉 보여줄 페이지가 1개 밖에 없는데 어떻게 각각의 기능을 하는 여러 페이지를 어떻게 보여줄까? 바로 라우팅 시스템을 사용하여 구현한다. 라우팅 시스템을 이용하면 여러 페이지로 구성된 웹 어플리케이션을 만들 때, 하나의 파일이지만 페이지별로 컴포넌트를 분리해 보여줄 수가 있다. 이러한 기능을 하는 게 2가지가 있는데, 바로 지금 글을 쓰는 리액트 라우터와 다음에 배울 Nextj.js라는 리액트의 프레임워크다...
Props Drilling 해당 컴포넌트에 필요한 것은 아니지만 데이터를 내려주기 위해서 onRemove()나 onEdit() 같이 DiaryList 컴포넌트를 거쳐가는 props들이 있다. 이러한 props들이 많으면 이름이나 코드를 수정할 때 모든 걸 일일이 들어가서 수정해줘야 하는 어려움이 있고, 그렇기 때문에 코드가 복잡해질 경우 유지보수를 하기 어렵다는 단점이 있다. 이처럼 props가 땅 파고 계속 들어가는 것처럼 내려가는 모양이라 위 현상을 Props Drilling이라고 한다. 이를 방지하기 위해서 context를 사용한다. Context – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 부모 컴포..
useReducer 일기장 어플리케이션을 만들면서 부모 컴포넌트인 App 컴포넌트에 거의 모든 상태 변화 처리 함수가 몰려 있다. 거의 모든 함수나 값들이 const [data, setData] = useState([])를 가지고 state를 변화하는 로직들이기 때문이다. 아무래도 코드들이 길어지보니 업데이트 로직을 이해하거나 상태 값을 추적하기가 쉽지 않다. 이럴 때 useReducer로 상태 관리 로직을 보다 간결하고 구조적으로 정리할 수 있다. 원래 useState를 사용하면 이렇게 코드를 짜야 한다. 이게 useReducer를 만나면 이렇게 바뀐다. 크게 달라진 점은 useState 대신 useReducer가 생겼고, 이 안에는 reducer라는 함수와 초기값이 들어 있다. useState처럼..
React.memo 일기를 만들 때 사용한 부모 컴포넌트 App이 자식 컴포넌트 2개에 각각의 prop을 주고 있다. 이 때 자식 컴포넌트에서 해당 prop을 받아 부모 컴포넌트의 state를 변경 시켰다. 그러면 부모 컴포넌트는 state가 수정되어 다시 렌더링을 하게 된다. 하지만 이 때 변화가 일어나지 않은 TextView 컴포넌트까지 통째로 리렌더링 되는 문제가 생긴다. (useMemo도 그렇지만 이렇게 최적화를 하지 않으면 지금은 크게 와닿지 않지만, 실제로 프로젝트를 하거나 더 큰 규모, 더 복잡한 파일들을 다루게 될 경우에는 개발한 웹 어플리케이션의 속도나 품질이 떨어질 수 있어서 작은 프로젝트여도 한 번 만들어보고 최적화 하는 습관을 들여야한다.) 아무튼 위와 같이 가만히 있는 자식 컴포넌..
useMemo 이미 계산한 연산 결과를 기억해뒀다가 동일한 계산을 시킬 때, 기억해둔 데이터를 반환하는 방법 이렇게 기억해두는 것을 memoization이라고 한다. useMemo는 return을 가지고 있는 함수를 감싸 사용한다. useMemo(() => {}, []) useEffect와 같이 콜백 함수에 코드를 적고, 의존성 배열에 넣는 값이 변하지 않으면 다시 연산하지 않는다. 즉 의존성 배열에 넣는 값이 변할 때만 다시 연산한다. 일기장 어플리케이션을 만들고 있는데, 일기 하나의 내용을 수정하는 액션을 할 때 모든 게 리렌더링 되었다. const getDiaryAnalysis = () => { console.log("일기 분석 시작"); const goodCount = data.filter((it..
리액트의 생애주기 인간마냥 리액트도 생애주기가 있다. 아기 리액트, 어른 리액트, 노인(!) 리액트...는 아니다. 이런 나이에 따른 생애 주기는 아니지만 탄생과 성장, 소멸이라는 부분은 비슷하다. 화면에 나타나는 리액트의 탄생을 Mount 무언가 업데이트 되거나 변화해 리렌더되는 성장(업데이트)을 Update 화면에서 사라지는 소멸을 Unmount 라고 표현한다. 이 3가지 생애주기마다 사용할 수 있는 메서드가 있으나 오로지 클래스형 컴포넌트에서만 사용할 수 있었다. 그러나 지금은 react Hooks가 나타나 함수형 컴포넌트도 useEffect를 사용하면 리액트의 생애주기를 나타낼 수 있게 되었다. react Hooks는 use 키워드를 붙인 약간의 함수와 같은 형태인데 원래 클래스형 컴포넌트에 있던..
한입 크기로 잘라먹는 리액트 강의를 수강하는 중에 새로운 방식을 알게 됐다. 이런 일기장을 만들 때 첫 번째 input이 작성자, 두 번째 input이 본문이라고 할 때 const [author, setAuthor] = useState(""); const [content, setContent] = useState(""); 로 useState를 작성한다. 둘 다 input 안에 무언가를 작성할 때, 즉 change할 때 값을 상태 변화 함수에 넣어줘야 한다. {setAuthor(e.target.value);}} /> {setContent(e.target.value);}} /> 모두 미세한 차이가 있긴 하지만 구조 자체는 동일하다. 이럴 때 하나의 객체로 통째로 묶고 객체의 프로퍼티 개념으로 접근하면 코드의..
