리액트 기초/React hooks

useRef()

React.useRef() 함수형 컴포넌트에서 돔 요소를 가져오는 방법이다. 클래스형 컴포넌트는 인스턴스를 생성 후 render 코드 블록 쪽만 리랜더링후 다시 실행한다. 하지만 함수형 컴포넌트는 함수 블록 안에 있는 모든 것을 리랜더링시 마다 다시 실행한다. 그래서 함수형 컴포넌트에 createRef를 사용 할 시, ref 값이 초기화 되어서 원하는 값을 얻지 못하기 떄문에, 리액트 훅인 useRef를 사용하는 것이다. useRef()는 쉽게 설명하면 도플갱어 박스이다. 어떤 값을 넣어주면 그 값으로 초기화된 변경 가능한 ref 객체를 반환해주기 때문! 그리고 이 값은 원본이 아니라 똑같이 생긴 다른 값이라 변경도 된다. 변경한다고 해도 리렌더링은 일어나지 않습니다. Ref 사용 이유! ref를 이용하..

useEffect()

useEffect() useEffect Hook은 클래스형 컴포넌트의 라이프 사이클 함수인 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 볼 수 있다. 즉, useEffect는 컴포넌트가 Mount, Update, Unmount 된 후에 일을 처리한다. 컴포넌트의 라이프 사이클은 여기를 클릭하면 확인할 수 있다. 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다. 함수형 컴포넌트에서 위와 같은 경우에 직면할 경우 사용하는 것이 useEffect() 훅 이다. useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 전달한다. 리액트는 우리가 넘긴 함수를 ..

useState()

useState() 함수형 컴포넌트에서 state를 관리하는 메서드이다. useState 훅은 React 패키지에서 임포트해야 하기 때문에 코드 상단에 아래 코드를 써서 임포트해주자. import { useState } from "react"; 기본적인 사용 형식은 아래와 같다. const ['staete 이름', 'state를 변경할 함수'] = useState('state 초기값') 만약 state의 이름이 count, state를 변경하는 함수가 setCount, state의 초기값이 0이라면 아래처럼 쓸 수 있다. const [count, setCount] = useState(0); 만약 위의 count라는 이름을 가진 state의 값을 1증가 시키고 싶다면 아래처럼 사용할 수 있다! setCou..