Hooks
- 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 함수.
- Hook은 React의 함수형 컴포넌트 내에서만 사용 가능.
- custom Hook 이름은 "use"로 시작하는 것을 권장.
💻 주요 Hook 종류
1. useState: 컴포넌트에서 상태를 관리할 수 있게 해준다.
2. useEffect: 컴포넌트의 랜더링 이후에 특정 작업을 실행할 수 있게 해준다.
useEffect(() => {
console.log("location이 변경될 때 마다 실행됩니다. ✊🏻");
}, [location]);
3. useMemo: 계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화 한다.
// [useMemo 사용!]
// 특정 값이 변경되었을 때만 함수가 호출되도록
// number 값이 변경될 때만 함수를 재실행하고 값을 저장
const calc2 = useMemo(() => {
console.log("calc 2");
// return 이후의 number * 2 값이 memoization 됨.
return number * 2;
}, [number]);
return (
<>
<input
type="text"
onChange={(e) => setInputValue(e.target.value)}
value={inputValue}
/>
<button onClick={() => setNumber(number + 1)}>+1</button>
<p>number: {number}</p>
<p>calc: {calc()}</p>
<p>calc2: {calc2}</p>
</>
);
}
4. useCallback: 함수를 메모이제이션하여 불필요한 리렌더링을 방지.
5. useRef: DOM 요소에 접근하거나 변경 가능한 값을 저장하는 데 사용.
const inputRef = useRef(null);
6. useReducer: 복잡한 상태 로직을 관리하는 데 사용.
const [state, dispatch] = useReducer(reducer, initialState);
7. useContext: 컴포넌트 트리 전체에 데이터를 제공하는 데 사용.
🌍 React 공식 문서
📺 관련 강의
Router
- React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 표준 라이브러리.
💻 특징
1. 클라이언트 사이드 라우팅: 서버 요청 없이 URL에 따라 UI를 업데이트
2. 선언적 라우팅: Routes와 Route 컴포넌트를 사용하여 라우트를 정의
3. 중첩 라우트: 복잡한 계층 구조의 라우팅을 지원
4. 동적 라우팅: 렌더링 중에 라우트를 정의할 수 있어 더 복잡한 앱 개발이 가능
5. 상대 경로 지원: 자동으로 부모 라우트의 URL을 기반으로 경로를 설정
import { Link } from "react-router-dom";
export default function Header() {
return (
<header className="Header">
<span>logo</span>
<div>
<Link to={"/"} className="menu-item">
홈으로
</Link>
<Link to={"/test"} className="menu-item">
테스트
</Link>
<Link to={"/products"} className="menu-item">
Product
</Link>
</div>
</header>
);
}
'🌱SeSAC x CodingOn 웹 취업 부트캠프' 카테고리의 다른 글
[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 12주차 (1): React style (4) | 2025.01.21 |
---|---|
[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 11주차 (2): React Props & State, Event Handling, map(), filter(), Life Cycle (1) | 2025.01.20 |
[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 11주차 (1): React (0) | 2025.01.07 |
[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 10주차: 프로젝트 회고 (3) (0) | 2025.01.07 |
[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 9주차: 프로젝트 회고 (2) (2) | 2025.01.07 |