Hooks7 [React] Hooks - useRef 이번엔 함수형 컴포넌트에서 Ref를 사용할 수 있게 만들어주는 Hook인 useRef를 알아보겠습니다. 그 전에 Ref에 대한 설명은 아래 포스트를 참조해주세요. 2021.11.12 - [Programming/React] - ref ref 1. ref HTML을 작성할 때 요소에 식별가능한 유일한 이름을 줄때 id를 이용했습니다. 그리고 id를 가지고 이런저런 작업들을 했었는데 이 기능을 리액트에서 이용할 수 있게 해주는 게 ref입니다. ref bamtory29.tistory.com 1. useRef Ref를 간단하게 소개하자면 컴포넌트에 html의 id속성처럼 식별자를 붙여주는 기능이었습니다. 다만 이 기능은 클래스형에서만 사용가능했었는데요. 이를 함수형 컴포넌트에서도 사용가능하도록 만들어준 Hook.. 2021. 11. 17. [React] Hooks - useCallback 1. useCallback useCallback Hook는 지난 포스트에서 다룬 useMemo처럼 최적화를 담당하고 있습니다. 차이점은 useMemo는 컴포넌트 내부 연산을 주로 최적화 하고, useCallback은 렌더링 자체의 성능 최적화에 주로 사용됩니다. 그래서 주로 렌더링이 자주 되는 컴포넌트에서 혹은 컴포넌트가 많아지면 사용하게 됩니다. 지난번에 만들었던 컴포넌트를 통해 실습해보겠습니다. 지난번에 사용한 컴포넌트의 코드입니다. import React, {Fragment, useState, useMemo} from 'react'; const getTotal = numbers => { let total = 0; console.log('getTotal() 호출'); numbers.forEach(va.. 2021. 11. 16. [React] Hooks - useMemo 1. useMemo 이번에 소개할 Hook인 useMemo는 컴포넌트 내부 중에서도 연산에 대해서 최적화를 하는 Hook입니다. Memo라는 것은 우리가 간단하게 남기는 쪽지라기보단, 메모이제이션(memoization)이라는 용어에서 왔습니다. 이 메모이제이션은 컴퓨터공학 용어로 연산을 반복할 때 이전의 수행했던 값을 따로 저장해 반복 수행을 줄여 최적화를 하는 기술입니다. 우선 useMemo를 사용하지 않은 예제로 input에 입력한 숫자 값을 계속 더해서 출력하는 컴포넌트를 만들었습니다. import React, {Fragment, useState} from 'react'; const getTotal = numbers => { let total = 0; console.log('getTotal() 호출.. 2021. 11. 16. [React] Hooks - useEffect 1. useEffect useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 하도록 만드는 Hook입니다. 라이프 사이클 메소드인 componentDidMount나 componentDidUpdate, componentWillUnmount와 비슷하게 작동합니다. 이 Hook가 함수형 컴포넌트에서 라이프 사이클 메소드를 사용할 수 있는 방법 중 하나가 됩니다. useEffect는 다음과 같이 사용합니다. useEffect(함수, []); 이때, 두번째 인수로 전달하는 배열은 필수가 아닌 선택사항입니다. 그리고 이 두번째 인수로 배열의 전달 유무, 배열의 내용에 따라서 useEffect는 다른 동작을 하게 됩니다. 지난번에 useState를 배우면서 만들었던 컴포넌트를 계속해서 이용해보겠습니다. impo.. 2021. 11. 16. [React] Hooks - useState Hooks에서 처음으로 다뤄볼 기능은 useState였습니다. 예전에 살짝 어떤 느낌이다만, 소개했고 이번엔 그 본격적인 사용 방법을 다루려고 합니다. 1. useState useState는 함수형 컴포넌트 내부에서 state 값을 관리(변경 등)을 하기 위해 사용하는 Hook입니다. 그러면 실제 사용을 통해 useState를 알아보겠습니다. 다음은 버튼에 따라 글자와 문자가 변하는 간단한 컴포넌트입니다. import React, {Fragment, useState} from 'react'; const ColorChanger = () => { const [colorText, setColorText] = useState('검정'); const [color, setColor] = useState('black.. 2021. 11. 15. [React] Hooks 그동안 여러번 언급이 되었던 Hooks. 이제 드디어 Hooks에 대해서 알아볼 시간이 되었습니다. 1. Hook Hook는 리액트 버전 16.8부터 새로 추가된 기능입니다. 이 Hook를 이용하면 기존 클래스형 컴포넌트들에서 이용하던 기능들을 함수형 컴포넌트에서도 이용할 수 있게 되었습니다. Hook가 등장해서 쓰이게 된 계기는 맨 아래 참조의 공식문서에 써있으니 한 번 읽어보시길 권해드립니다. 귀찮으신 분들을 위해 요약하자면 class형 컴포넌트 문법에서 오는 여러 난해함(특히 자바스크립트의 this)들이 주는 어려움과 재사용의 방해를 개선하기 위해 비교적 사용성이 뛰어난 함수형 컴포넌트에서 class형의 상태관리 등을 이용하기 위해 개발된 것이라고 합니다. 이제, 다음부터 나올 몇 개의 포스팅들을 .. 2021. 11. 12. 이전 1 2 다음 300x250
