[문서] 처음 만난 리액트: 마치며

FrontOverflow

Q&A

문서

강의

영상

매거진

채용

처음 만난 리액트

0. 준비하기

0.1

HTML 살펴보기

0.2

CSS란 무엇인가?

0.3

자바스크립트 (JavaScript)

0.4

개발환경 설정하기

0.5

마치며

1. 리액트 소개

1.1

리액트는 무엇인가?

1.2

리액트의 장점

1.3

리액트의 단점

1.4

마치며

2. 리액트 시작하기

2.1

(실습) create-react-app을 사용한 리액트 애플리케이션 생성

2.2

(실습) Vite를 사용한 리액트 애플리케이션 생성

2.3

마치며

3. JSX 소개

3.1

JSX란?

3.2

JSX의 역할

3.3

JSX의 장점

3.4

JSX 사용법

3.5

(실습) JSX 코드 작성해보기

3.6

마치며

4. Rendering Elements

4.1

Element에 대해 알아보기

4.2

Element 렌더링하기

4.3

렌더링된 Element 업데이트 하기

4.4

(실습) 시계 만들기

4.5

마치며

5. Components와 Props

5.1

Component에 대해 알아보기

5.2

Props에 대해 알아보기

5.3

컴포넌트 만들기

5.4

컴포넌트 합성

5.5

컴포넌트 추출

5.6

(실습) 댓글 컴포넌트 만들기

5.7

마치며

6. State와 Lifecycle

6.1

State

6.2

Lifecycle에 대해 알아보기

6.3

(실습) State 사용해보기

6.4

(실습) React Developer Tools 설치하기

6.5

(실습) 생명주기 함수 사용해보기

6.6

마치며

7. Hooks

7.1

Hooks란 무엇인가?

7.2

useState()

7.3

useEffect()

7.4

useMemo()

7.5

useCallback()

7.6

useRef()

7.7

Hooks의 규칙

7.8

나만의 Hooks 만들기

7.9

(실습) Hooks를 사용한 컴포넌트 개발

7.10

마치며

8. Handling Events

8.1

이벤트 처리하기

8.2

Arguments 전달하기

8.3

(실습) 클릭 이벤트 처리하기

8.4

마치며

9. Conditional Rendering

9.1

Conditional Rendering이란?

9.2

Element Variables

9.3

Inline Conditions

9.4

컴포넌트 렌더링 막기

9.5

(실습) 로그인 여부를 나타내는 툴바 만들기

9.6

마치며

10. Lists와 Keys

10.1

리스트와 키란 무엇인가?

10.2

여러 개의 컴포넌트 렌더링하기

10.3

기본적인 리스트 컴포넌트

10.4

리스트의 키에 대해 알아보기

10.5

(실습) 출석부 출력하기

10.6

마치며

11. Forms

11.1

폼이란 무엇인가?

11.2

Controlled Components

11.3

textarea 태그

11.4

select 태그

11.5

File input 태그

11.6

여러 개의 입력 다루기

11.7

Input Null Value

11.8

(실습) 사용자 정보 입력 받기

11.9

마치며

12. Lifting State Up

12.1

Shared State

12.2

하위 컴포넌트에서 State 공유하기

12.3

(실습) 섭씨와 화씨 온도 표시하기

12.4

마치며

13. Composition vs Inheritance

13.1

Composition에 대해 알아보기

13.2

Inheritance에 대해 알아보기

13.3

(실습) Card 컴포넌트 만들기

13.4

마치며

14. Context

14.1

Context란 무엇인가?

14.2

언제 Context를 사용해야 할까?

14.3

Context를 사용하기 전에 고려할 점

14.4

Context API

14.5

여러 개의 Context 사용하기

14.6

useContext()

14.7

(실습) Context를 사용하여 테마 변경기능 만들기

14.8

마치며

15. Styling

15.1

CSS

15.2

styled-components

15.3

(실습) styled-components를 사용하여 스타일링 해보기

15.4

마치며

16. 미니 프로젝트

16.1

미니 블로그 기획하기

16.2

(실습) 프로젝트 생성하기

16.3

(실습) 필요한 패키지 설치하기

16.4

(실습) 주요 컴포넌트 구성하기

16.5

(실습) 폴더 구성하기

16.6

(실습) UI 컴포넌트 구현하기

16.7

(실습) List 컴포넌트 구현하기

16.8

(실습) 가짜 데이터 만들기

16.9

(실습) Page 컴포넌트 구현하기

16.10

(실습) 각 페이지별 경로 구성하기

16.11

main.jsx 파일 설명

16.12

(실습) 애플리케이션 실행하기

16.13

(실습) Production 빌드하기

16.14

마치며

처음 만난 리액트 문서

14.8 마치며

이번 장에서 배운 내용은 아래와 같습니다.

컨텍스트란?
- 컴포넌트들 사이에서 데이터를 props를 통해 전달하는 것이 아닌, 컴포넌트 트리를 통해 곧바로 데이터를 전달하는 방식
- 어떤 컴포넌트든지 컨텍스트에 있는 데이터에 쉽게 접근할 수 있음
언제 컨텍스트를 사용해야 할까?
- 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우
- Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트의 데이터를 읽을 수 있음
컨텍스트 사용 전 고려할 점
- 컴포넌트와 컨텍스트가 연동되면 재사용성이 떨어짐
- 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면, 기존 방식대로 props를 통해 데이터를 전달하는 것이 더 적합
컨텍스트 API
- React.createContext()
  - 컨텍스트를 생성하기 위한 함수
  - 컨텍스트 객체를 리턴함
  - 기본값으로 undefined를 넣으면 기본값이 사용되지 않음
- Context.Provider
  - 모든 컨텍스트 객체는 Provider라는 컴포넌트를 갖고 있음
  - Provider컴포넌트로 하위 컴포넌트들을 감싸주면 모든 하위 컴포넌트들이 해당 컨텍스트의 데이터에 접근할 수 있게 됨
  - Provider에는 value라는 prop이 있으며, 이것이 데이터로써 하위에 있는 컴포넌트들에게 전달됨
  - 여러 개의 Provider컴포넌트를 중첩시켜 사용할 수 있음
- Class.contextType
  - Provider 하위에 있는 클래스 컴포넌트에서 컨텍스트의 데이터에 접근하기 위해 사용
  - 단 하나의 컨텍스트만을 구독할 수 있음
- Context.Consumer
  - 컨텍스트의 데이터를 구독하는 컴포넌트
  - 데이터를 소비한다는 뜻에서 consuming 컴포넌트라고도 부름
  - consuming 컴포넌트는 컨텍스트 값의 변화를 지켜보다가 값이 변경되면 재렌더링됨
  - 하나의 Provider컴포넌트는 여러 개의 consuming 컴포넌트와 연결될 수 있음
  - 상위 레벨에 매칭되는 Provider가 없을 경우 기본값이 사용됨
- Context.displayName
  - 크롬의 리액트 개발자 도구에서 표시되는 컨텍스트 객체의 이름
여러 개의 컨텍스트 사용하기
- Provider컴포넌트와 Consumer컴포넌트를 여러 개 중첩해서 사용하면 됨
useContext()
- 함수 컴포넌트에서 컨텍스트를 쉽게 사용할 수 있게 해주는 훅
- React.createContext() 함수 호출로 생성된 컨텍스트 객체를 인자로 받아서 현재 컨텍스트의 값을 리턴
- 컨텍스트의 값이 변경되면 변경된 값과 함께 useContext()훅을 사용하는 컴포넌트가 재렌더링됨

Context를 사용하면 데이터를 Component Tree를 통해 곧바로 하위 컴포넌트로 전달할 수 있습니다. 데이터를 무조건 props를 통해서 전달하는 것보다, Context를 사용하여 깔끔하게 처리할 수 없을지 고민해보고 나중에 실제로 프로젝트에 적용해보기 바랍니다.

개발자를 위한 슬라이드 작성 도구

마지막 업데이트: 2025년 08월 21일 09시 05분

On this page

14.8 마치며

.css-jz2m06{color:var(--chakra-colors-blue-400);-webkit-text-decoration:underline;text-decoration:underline;}처음 만난 리액트 문서

14.8 마치며

처음 만난 리액트 문서