Recent Posts
Recent Comments
Archives
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- domain
- 코드카타
- 모던자바스크립트
- useRouter
- error
- deep dive
- 초기셋팅
- 프로젝트 셋팅
- git
- array정적메서드
- 오블완
- 모던 자바스크립트
- React
- 티스토리챌린지
- CORS
- 프로그래머스
- vscode
- 코딩테스트
- 소셜 로그인
- vercel
- 셋팅
- nextjs
- 코테
- 리터럴
- js
- 스파르타코딩클럽
- 내일배움캠프
- Next
- 자주 까먹는
- 구글 로그인
- Today
- Total
파피루스
[React] Hook : useState, useEffect, useRef, useContext 본문
useState
: 컴포넌트에 state 변수를 추가할 수 있다 (공식 문서)
const [state, setState] = useState(initialState);
- initialState : 초기 설정값
const [age, setAge] = useState(28);
console.log(age); // 28
setAge(30);
console.log(age); // 30
useEffect
: 외부 환경과 같은 생명주기를 가질 수 있다 (공식 문서)
useEffect( setup, dependencies? );
- setup : Effect의 로직이 포함된 기능입니다. 선택적으로 정리 함수를 반환할 수도 있습니다.
- dependencies : 값이 변경될 때마다 setup을 실행합니다. 변경되는 걸 감지할 값들을 배열로 전달합니다.
useEffect(()=>{
console.log("mount 될 때 동작합니다.");
return () => { // 정리 함수 반환
console.log("unmount 될 때 동작합니다.");
}
}, []);
useRef
: 렌더링에 필요하지 않은 값을 참조할 수 있다. (공식 문서)
const ref = useRef( initialValue );
- initialState : 초기 설정값
const ref = useRef("최초");
console.log(ref); // { current : "최초" }
ref.current = "변경";
console.log(ref); // { current : "변경" }
useContext
: 컴포넌트에서 context를 읽고 구독할 수 있다. (공식 문서)
❗context value 가 변경되면 context를 사용하고 있던 모든 컴포넌트가 리렌더링되기에 주의해서 사용해야 한다.
// FamilyContext.js
import {createContext} from "react";
export const FamilyContext = createContext(null);
// GrandFather.jsx
export default GrandFather () {
const name = "떼굴펜";
const age = 20;
return (
<FamilyContext.Provider value = {{ name, age }} >
<Father />
</FamilyContext.Provider>
);
}
// Child.jsx
....
const { name, age } = useContext(FamilyContext);
console.log(name, age); // 떼굴펜, 20
....
'React' 카테고리의 다른 글
react/nextJs font 적용하기 (1) | 2024.08.31 |
---|---|
[Error] Functions cannot be passed directly to Client Components (0) | 2024.08.04 |
[React] Hook : useCallback, useMemo (1) | 2024.05.20 |
[React] 함수형 업데이트 (feat. 순수함수 vs 비순수함수) (0) | 2024.05.20 |
React 시작하기 (주요 개념과 이전 개발 방식과의 차이) (0) | 2024.05.13 |