React (9) 썸네일형 리스트형 [ React ] 재조정(Reconciliation)과 Key 사용 이유 배경 리액트는 가상돔을 저장하고 있다가 DOM에 변화가 생기면 변경된 부분만 동기화시키는 방식으로 렌더링을 진행한다. 공식문서에는 가상돔에 대해 아래와 같이 기술하고 있다. Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 '재조정(Reconciliation)' 이라고 합니다. 위와 같이 리액트는 뷰(HTML)에 변화가 있을 때, 구 가상돔과 새 가상돔을 비교하여 변경된 내용만 DOM에 적용한다. 그리고 이러한 비교 과정을 ‘재조정(Reconciliation)'이라고 한다. DOM은 트리 자료구조를 가지므로 재조정은 두 트리간의 차이를 비교하는 과정으로 볼 .. [ React ] styled-components로 드롭다운 메뉴 구현 styled-components로 드롭다운 메뉴를 직접 구현해보자. 결과물은 아래와 같다. 샘플 코드는 이 글의 끝부분에서 확인할 수 있다. css에 대한 설명은 생략하고, 어떤 원리로 구현했는지를 위주로 적을 생각이다. 구현 전략 너무 복잡하게 생각하지 말고 쉽게 접근해보자. 어떤 행위를 하는지, 각 행위마다 어떤 변화가 있는지를 생각해보면 된다. 행위(원인)에 따른 결과를 정리하면 크게 세 가지 케이스로 분류할 수 있다. 참고로 '드롭다운 메뉴'란 위 그림에서 마이페이지, 게시판을 의미하며, '세부 메뉴 박스'란 '메뉴1 ~ 메뉴3'이 있는 박스를 말한다. 그리고 편의상 화면 상에 있는 것을 mount, 화면 상에 없는 것을 unmount로 부르겠다. 1. 세부 메뉴 없는 상태에서 드롭다운 메뉴를 클.. [ React ] styled components 사용법 간단 정리 기본 구문 // 구문 styled.tagName`css code` // 예시 import styled from 'styled-components'; const Component = styled.p` color: blue; ` Hello World! props 사용법 import styled from "styled-components"; const Component = styled.div` font-size: ${(props) => props.large ? 16 : 12}px; font-size: ${({large}) => large ? 16 : 12}px; // 이 방법도 가능 ` Hello World! Hello World! // 위 둘은 완전 동일 조건부 스타일 생성 import styled, { c.. [ React ] React Redux API (with 카운터 예제) Redux는 상태 관리 라이브러리다. 리액트 빌트인 훅에서 useReducer와 useContext가 합쳐진 느낌이다. 따라서 useReducer와 useContext를 잘 이해했다면 React Redux도 어렵지 않게 이해할 수 있다. Redux의 핵심은 세 가지로 축약할 수 있다. 1. 상태는 readOnly다. 2. reducer는 순수 함수여야 한다. 3. 하나의 애플리케이션에는 하나의 store가 있다. 상태가 readOnly라는 뜻은 상태 변경시 state에 직접적인 변화를 주는 것이 아니라, 기존의 state로 새로운 state를 생성하는 것을 의미한다. 이는 리액트에서 setState를 사용할때와 동일하다. 예를 들어 상태값이 배열 또는 객체라면, 상태를 업데이트 하려면 spread 연산자.. [ React ] useReducer를 알아보자 이 글은 리액트 공식 문서와 이 영상을 참고해서 정리한 글이다. 영상이 아주 잘 정리되어 있어서 보는 것을 강력히 추천한다. (영상제작자에게 허락 받았습니다) useReducer의 세 요소 useReducer의 구문을 먼저 살펴보자. const [state, dispatch] = useReducer(reducer, initialState); useReducer는 useState와 같이 상태 관리를 할때 사용하는 훅이다. useState와 육안으로 구분되는 점은 dispatch와 reducer다. 이 둘은 함수인데, 각각 형태는 아래와 같다. dispatch(action) reducer(state, action) 여기서 주목해야할 점은 dispatch 내부의 action이 reducer의 두 번째 인자로 .. [ React ] useRef를 알아보자 이 글은 리액트 공식 문서와 이 영상을 참고해서 정리한 글이다. 영상이 아주 잘 정리되어 있어서 보는 것을 강력히 추천한다. (영상제작자에게 허락 받았습니다) 정의 및 특징 우선 공식 문서에서 useRef를 어떻게 정의하고 있는지부터 알아보자. useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. 여기서 중요한 것은 세 가지다. 1. useRef는 변경 가능한 객체를 반환한다. 2. 반환 객체는 useRef의 인자를 'curre.. [ React ] React Router 사용법 (v6) 이번 글에서는 React Router의 개념 및 사용법에 대해 알아보자. React Router의 기본 구조 React Router는 크게 아래 세 파트로 나뉜다. BrowserRouter: History 객체를 생성하고, 초기 위치를 상태로 만들고, URL을 참조한다. Routes: Route Config라는 경로 객체 트리를 생성한다. Route는 Routes 안에서만 유효하다. Route: path가 현재 URL과 일치하면 element가 렌더링된다. 여기서 생소한 단어 두 개가 등장한다. 먼저, History 객체란? History 객체는 History Stack을 조작할 수 있도록 API를 제공하는 객체다. History Stack은 접속 이력 스택으로 생각하면 된다. 브라우저의 뒤로 가기 및 .. [ React ] useEffect와 컴포넌트 생명주기 리액트에서 Hook이 등장한 이후로 함수 컴포넌트 내부에서 state와 컴포넌트의 생명주기를 다룰 수 있게 되었다. state는 'useState'라는 훅을, 컴포넌트는 생명주기는 'useEffect'라는 훅을 사용하면 된다. 이 글의 학습 목표는 'useEffect'의 작동 원리 및 순서를 상세하게 이해하는 것이다. 그럼 바로 시작해보자! 1. Hook Flow Diagram 사실 이 글은 위 다이어그램을 눈으로 직접 확인해보는 것에 불과하다. 위 그림과 같이 컴포넌트의 생명주기는 크게 세 단계로 나뉜다. 참고로 'Run lazy initializers'는 useState와 useReducer 호출 시점으로, 이 함수들은 Mount 시점에만 호출된다. Mount, Update, Unmount의 의미는 .. 이전 1 2 다음
