프론트엔드/React
[React] SOLID 원칙을 컴포넌트에 적용하기
좋은 컴포넌트 설계는 정답이 없습니다. 그래서 어렵죠. 저 또한 많은 시행착오를 겪으면서 여러 개념들을 찾아 공부하게 되었습니다. 그러다 객체지향에서 좋은 해결책을 얻게 되어 이를 정리해보고자 합니다. 가장 먼저 SOLID 원칙을 알아보며 이를 컴포넌트에 적용해보도록 하겠습니다. 아래 자료들을 참고했습니다. Eduardo Moniz의 Applying SOLID To React July 2020 React Lunch & Learn: SOLID Principles in React 로버트 C. 마틴의 Clean Architecture Applying SOLID principles in React 1️⃣ 단일 책임 원칙 (SRP, Single Responsibility Principle) 개념 하나의 모듈은 하..
[React] useEffect의 철학과 Lifecycle
useEffect는 클래스 컴포넌트에서 Lifecycle 메서드를 통해 복잡하게 다뤘던 Side Effect 로직을 개선합니다. 컴포넌트의 마운트, 업데이트, 언마운트 등의 Lifecycle을 하나의 useEffect hook으로 처리하기 때문입니다. 이를 통해 함수형 컴포넌트에서도 쉽게 Side Effect를 다룰 수 있습니다. 하지만 useEffect의 철학은 단순히 Lifecycle을 대체하는 것이 전부가 아닙니다. "thinking in effects." useEffect의 철학은 Side Effect를 Lifecycle이 아닌, 관심사에 따라 관리할 수 있게 하는 것입니다. (Dan Abramov의 A Complete Guide to useEffect 내용이 많은 도움 되었습니다.) 등장 배경..
[React] useState의 동작 원리와 클로저
useState hook은 함수형 컴포넌트의 상태 관리 문제를 클로저를 통해 해결합니다. 이 글을 통해 간단한 useState hook을 단계별로 직접 구현해보겠습니다. 매 단계마다 어떠한 문제를 만나 어떻게 해결하는지의 과정을 이해해봅시다. (아래의 글들이 useState를 이해하는데 많은 도움이 되었습니다.) swyx의 Deep dive: How do React hooks really work? Rudi Yardley의 React hooks: not magic, just arrays 여울코딩님의 클로저와 useState Hooks 함수형 컴포넌트의 상태 관리 클래스형 컴포넌트는 render() 메서드를 통해 상태 변경을 감지할 수 있습니다. 반면 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 ..
[React] map()에 key를 사용하는 이유 (index를 key로 쓰면 안되는 이유)
Warning: Each child in a list should have a unique "key" prop 우리가 자주 보는 이 경고는 리액트에서 map()에 key 속성을 부여하지 않았을 때 발생합니다. 이 글을 통해 map에 키가 필요한 이유와 index를 키로 쓰면 안되는 이유를 알아보겠습니다. (Robin Pokorny의 Index as a key is an anti-pattern을 읽어보시는 것도 추천합니다.) 키가 필요한 이유 first second first second third 위의 코드처럼 자식의 맨 끝에 엘리먼트를 추가하는 과정은 크게 문제 되지 않습니다. 리액트는 기존 트리와 이후 트리가 일치하는 것을 확인하고 third를 트리에 추가하기 때문입니다. first second th..
[React] 엘리먼트와 컴포넌트 (Element, Component, JSX)
엘리먼트와 컴포넌트는 리액트의 철학 중 하나입니다. 엘리먼트는 DOM 노드나 컴포넌트에 대한 type과 props를 불변 객체로 관리합니다. 이러한 특징은 컴포넌트 간 의존성을 분리시켜 컴포넌트를 혼합, 중첩할 수 있게 만듭니다. 이 글을 통해 엘리먼트와 컴포넌트, 그리고 관련된 개념들에 대해 알아보겠습니다. (Dan Abramov의 React Components, Elements, and Instances를 읽어보는 것을 추천합니다.) 한글 버전 영상인 Boaz 유튜브의 React component, element, instance도 있습니다.) 엘리먼트 (Element) 엘리먼트는 type과 props를 가지는 불변 객체입니다. type의 종류에 따라 DOM 엘리먼트, 컴포넌트 엘리먼트로 나뉘게 됩니..