본문 바로가기

부트캠프교육중/react80

Custom Hooks - 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있습니다. -여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다. #장점 -상태관리 로직의 재활용이 가능. -클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있다. -함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다. #Custom Hook을 정의할때 규칙. - 함수 이름 앞에 use를 붙인다. -대개의 경우 프로젝트 내의 hooks 디렉토리에 custom hook을 위치시킨다. -함수는 조건부 함수가 아니어야 한다. 즉 return 하는 값은조건부 여서는 안된다. #이렇게 만들어진 c.. 2023. 3. 23.
useCallback -렌더링 최적화를 위한 hook이다. -useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 이용한 Hook입니다. -useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook입니다. function Calculator({x, y}){ const add = () => x + y; return {add()} ; } -현재 이 Calculator 컴포넌트 내에는 add라는 함수가 선언이 되어 있는 상태입니다. 이 add 함수는 props로 넘어온 x와 y 값을 더해 태그에 값을 출력하고 있습니다. 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새롭게 만들어질 것입니다. -useMemo와 마찬가지로, 해당 컴포넌트가 리렌더링 되.. 2023. 3. 22.
useMemo # 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조로 이루어져 있습니다. -렌더링 최적화를 위한 hook이다. -특정 값(value)를 재사용하고자 할 때 사용하는 Hook입니다. function Calculator({value}){ const result = calculate(value); return {result} ; } -해당 컴포넌트는 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리먼트로 출력을 하고 있습니다. -해당 컴포넌트는 렌더링을 할때마다 이 함수를 계속해서 호출할 것이다. /* useMemo를 사용하기 전에는 꼭 import해서 불러와야 합니다. */ import { useMe.. 2023. 3. 22.
Hook과 Component # Hook은 함수 컴포넌트에서 사용하는 메소드입니다. 함수 컴포넌트 이전에는 클래스(class) 컴포넌트가 있었습니다. # class component class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncrease = this.handleIncrease.bind(this); } handleIncrease = () => { this.setState({ counter: this.state.counter + 1 }) } render(){ return ( You clicked {this.state.counter} times Click me ) } } # functi.. 2023. 3. 22.

티스토리툴바