💻 React - useEffect, useRef

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

1. JSX
2. useState
3. 이벤트 핸들링
4. ref
5. useEffect
6. useRef

1. JSX

자바스크립트의 확장 문법이며 XML과 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 일반 자바스크립트 형태의 코드로 변환된다.

function App() {
  return (
  	<div>
      Hello <b>react</b>
    </div>
  )
}

위처럼 작성한 코드는 아래와 같이 변환된다.

function App(){
  return React.createElement('div', null, 'Hello ', React.createElement('b', null, 'react'));
}

1-1. JSX의 장점

1. 보기 쉽고 익숙하다.
2. 활용도가 높다.

2. useState

useState 함수의 인자에는 상태의 초깃값을 넣어준다.
함수를 호출하면 배열이 반환되고 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수이다.

3. 이벤트 핸들링

3-1. 이벤트 사용 시 주의사항

1. 이벤트 이름은 카멜 표기법으로 작성
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다.
3. DOM 요소에만 이벤트를 설정할 수 있다.

4. ref

4-1. ref는 어떤 작업을 할 때 사용할까?

DOM을 꼭 직접적으로 건드려야 할 때 사용한다.

4-2. DOM을 꼭 사용해야 하는 상황

1. 특정 input에 포컷 주기
2. 스크롤 박스 조작하기
3. Canvas 요소에 그림 그리기 등등

4-3. 콜백 함수를 통한 ref 설정

<input ref={(ref) => {this.input = ref} />

this.input은 input 요소의 DOM을 가리킨다.

4-4. createRef를 통한 ref 설정

리액트 내장 createRef라는 함수를 사용함.

input = React.createRef()

<input ref={this.input} />
  

5. useEffect

리액트 컴포넌트가 렌더링될 대마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.

5-1. 마운트될 때만 실행하고 싶을 때

함수의 두 번재 파라미터로 비어 있는 배열을 넣어준다.

useEffect(() => {
  console.log('마운트될 때만 실행')
}, []) 

5-2. 특정 값이 업데이트될 때만 실행하고 싶을 때

두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어준다.

useEffect(() => {
  console.log('name 값이 업데이트될 때만 실행')
}, [name]) 

5-3. 뒷정리하기

컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 return을 사용하면 된다.
useEffect 내부의 return은 해당 컴포넌트가 제거될때 실행됩니다.

6. useRef

useRef Hookdms 함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.

6-1. DOM에 직접 접근

useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킨다.

import { useRef } from 'react';

function App() {
	const inputRef = useRef();
	return (
		<div>
			<input ref={inputRef} />
			<button onClick={() => inputRef.current.focus()}>
				Focus
			</button>
		</div>
	)
}

6-2. React.forwardRef로 전달

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 이제 DOM 버튼으로 ref를 작접 받을 수 있습니다.
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

🔥 느낀점

css, vue를 끝내고 React로 다시 TIL을 시작하였다. 꾸준히 하려 했지만 매일 작성하는 것이 쉽지 않음을 다시 깨닫게 되었다. 다시 열심히 써보자!📝

react로 분명 프로젝트를 했는데 왜이리 낯선지 모르겠다. 책으로 강의 들은 내용을 다시 하나하나를 다시 살펴보니까 이런거였구나 싶었다. 이제 리액트 시작이니까 꾸준히 달려보자!

Refer

• 프로그래머스 데브코스
• 리액트 공식 문서-forwarding-refs
• 김민준 저, ⌜리액트를 다루는 기술(개정판)⌟, 길벗

정리

Day48