React 학습 여정 – 3일차 블로그
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *초보 개발자 및 React 학습자** (중간 난이도, 기능적 개념 설명 중심)
핵심 요약
- Hooks는 함수형 컴포넌트에서 상태 및 라이프사이클을 관리할 수 있도록 하는 JavaScript 함수
useState()는 상태를 관리하는 가장 기본적인 Hook으로,const [state, setState] = useState(initialValue)형식 사용- 함수형 컴포넌트에서 상태 로직 재사용 가능하며, 코드 가독성 향상
섹션별 세부 요약
1. Introduction to Hooks
- Hooks는 함수형 컴포넌트에서 상태 및 라이프사이클 메서드를 사용할 수 있도록 함
- 이전에는 클래스 컴포넌트만 상태를 사용할 수 있었지만, Hooks 도입 후 함수형 컴포넌트도 동일한 기능 가능
- Hooks는 일반 JavaScript 함수 또는 클래스 컴포넌트에서 사용 불가
2. What is a Hook?
- Hook은 함수형 컴포넌트 내부에서 React 기능(상태, 컨텍스트, 리프 등)을 사용할 수 있도록 하는 JavaScript 함수
- Hook은 반드시 함수형 컴포넌트 내부에서만 사용해야 함
3. Why use Hooks?
- 함수형 컴포넌트에서 상태 및 라이프사이클 메서드 사용 간단화
- 클래스 컴포넌트 작성 필요성 제거
- 코드의 가독성, 유지보수성 향상
- 커스텀 Hook을 통해 상태 로직 재사용 가능
4. Types of Hooks
- 내장 Hook 예시
useState()– 상태 관리useEffect()– 라이프사이클 메서드useContext()– 컨텍스트 사용- 3일차 강의에서는
useState()에 집중
5. What is useState()?
useState()는 함수형 컴포넌트에서 상태를 관리하는 가장 일반적인 Hook- 사용 예시
```javascript
const [stateVariable, setStateFunction] = useState(initialValue);
```
stateVariable: 데이터 저장setStateFunction: 데이터 업데이트initialValue: 상태의 초기 값
6. Example of useState()
- 카운터 앱 예시
```javascript
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
```
count는 상태 변수,setCount는 상태 업데이트 함수- 버튼 클릭 시
count값이 1 증가
7. How to count value in JSX?
- JSX 내에서 상태 변수는
{}로 직접 참조 가능 - 상태가 업데이트되면 자동으로 JSX 재렌더링
8. Mini Project – Counter App
- Hook 사용을 통한 간단한 카운터 앱 구현
- 구현 단계
- 문제를 작은 단위로 분해
- 필요한 상태 데이터 식별
useState()로 상태 저장- 사용자 동작(예: 버튼 클릭) 처리
- JSX에 상태 렌더링
결론
- Hooks는 함수형 컴포넌트에서 상태 및 라이프사이클을 간단하게 관리할 수 있도록 함
useState()는 상태 관리의 핵심 Hook으로, 초기값 설정 및 업데이트 로직 정의 필수- Mini Project(카운터 앱)을 통해 Hooks의 실무 적용 방법 학습
- 참고 자료: React Hooks 소개