#리액트

85 편의 글

리액트 기초 강좌 #13 커스텀 훅
8 분 소요

리액트 기초 강좌 #13 커스텀 훅

컴포넌트 사이에서 로직을 우아하게 공유하는 도구, 커스텀 훅을 만드는 법과 흔히 쓰이는 예시들을 살펴봅니다.

리액트 기초 강좌 #12 useContext
7 분 소요

리액트 기초 강좌 #12 useContext

prop drilling 문제를 해결하는 도구, React Context API와 useContext 훅의 사용법을 배워봅니다.

리액트 기초 강좌 #11 상태 끌어올리기 (lifting state up)
8 분 소요

리액트 기초 강좌 #11 상태 끌어올리기 (lifting state up)

두 형제 컴포넌트가 같은 데이터를 공유해야 할 때 사용하는 핵심 패턴, 상태 끌어올리기를 배워봅니다.

리액트 기초 강좌 #10 useEffect
8 분 소요

리액트 기초 강좌 #10 useEffect

컴포넌트 외부와 상호작용하는 side effect를 다루는 표준 도구, useEffect 훅의 동작과 흔한 패턴을 살펴봅니다.

리액트 기초 강좌 #9 폼 다루기 (controlled inputs)
8 분 소요

리액트 기초 강좌 #9 폼 다루기 (controlled inputs)

리액트에서 폼을 다루는 정석 패턴인 controlled component, 그리고 textarea/select/checkbox/radio 등 다양한 입력 요소 처리법을 정리합니다.

리액트 기초 강좌 #8 리스트와 key
7 분 소요

리액트 기초 강좌 #8 리스트와 key

배열을 화면에 렌더링하는 방법과 그때 반드시 등장하는 key prop의 의미, 그리고 인덱스 key의 함정을 살펴봅니다.

리액트 기초 강좌 #7 조건부 렌더링
6 분 소요

리액트 기초 강좌 #7 조건부 렌더링

상태에 따라 화면의 일부를 보였다 안 보였다 하거나 다른 모습으로 바꾸는 다양한 조건부 렌더링 패턴을 정리합니다.

리액트 기초 강좌 #6 이벤트 핸들링
7 분 소요

리액트 기초 강좌 #6 이벤트 핸들링

리액트의 이벤트 처리 방식과 합성 이벤트, 핸들러 작성 패턴, 이벤트 객체에서 정보를 꺼내는 방법을 살펴봅니다.

리액트 기초 강좌 #5 State와 useState
7 분 소요

리액트 기초 강좌 #5 State와 useState

컴포넌트가 변할 수 있는 데이터를 다루는 방법, state의 개념과 useState 훅을 배워봅니다.

리액트 기초 강좌 #4 컴포넌트와 props
8 분 소요

리액트 기초 강좌 #4 컴포넌트와 props

리액트의 핵심 단위인 컴포넌트를 만들어 화면을 작은 조각으로 분리하고, props로 데이터를 전달하는 방법을 배워봅니다.

리액트 기초 강좌 #3 JSX란 무엇인가?
6 분 소요

리액트 기초 강좌 #3 JSX란 무엇인가?

리액트 컴포넌트를 작성할 때 사용하는 특수한 문법, JSX의 기본 문법과 규칙을 살펴보겠습니다.

리액트 기초 강좌 #2 개발 환경 설정 (Node.js + Vite)
5 분 소요

리액트 기초 강좌 #2 개발 환경 설정 (Node.js + Vite)

본격적으로 코드를 작성하기 위해 Node.js를 설치하고, Vite로 첫 리액트 프로젝트를 만들어 개발 서버를 띄워보겠습니다.