[새싹x코딩온] 웹 퍼블리싱 과정 13주차 - 1 | React - useRef, useEffect

Ref와 useRef()

Reac의 DOM 접근

1. HTML에서와 마찬가지로 id/className 등으로 접근

→ 하지만 하나의 컴포넌트를 여러 번 사용한다면 id가 중복될 수 있다.

 

2. ref 이용

→ 컴포넌트 내부에서만 동작해서 중복되지 않는다.

→ Class형 컴포넌트의 기본 기능 / 함수형 컴포넌트에서는 useRef import 해서 사용한다.

 

ref

• 컴포넌트가 리렌더링 되어도 값을 유지하고 싶을 때 사용한다. (vs. variable)
• ref의 값은 변경되어도 리렌더링되지 않는다. (vs. state)
• DOM을 직접적으로 접근할 때 사용한다. ex) 컴포넌트의 input 태그의 값을 받거나, focus 주기, 스크롤 조작

 

useRef()

useRef() 훅은 특정 컴포넌트에 접근할 수 있는 객체(레퍼런스)를 사용하기 위한 훅이다.

const ref = useRef(초기값)

위와 같이 useRef 훅을 사용하면 파라미터로 들어온 초기값으로 초기화된 레퍼런스 객체를 반환하다.

 

return(
	<input ref = {ref}/>
)

위와 같이 선택하고 싶은 DOM에 ref를 설정한다.

 

.current

현재 참조하고 있는 엘리먼트이다.

current 속성으로 실제 요소에 접근한다.

 

variable vs. state vs. ref

variable, state, ref 비교

 

+ 조건부 렌더링

어떤 조건에 따라서 다른 결과를 렌더링 하는 것이다.

1. && 사용

{Boolean 조건 && (컴포넌트나 태그 등)}

• 조건이 참일 때만 해당 컴포넌트를 볼 수 있다.
• 삼항연산자와 비슷하지만 else ~의 조건이 없다.
• html 요소에서 if문만 사용하고 싶을 때 사용한다.

 

2. 삼항 연산자 사용

 

LifeCycle & useEffect

LifeCycle

LifeCycle은 클래스형 컴포넌트의 기본 기능이다.

Hook이라는 기능의 등장으로 함수형 컴포넌트에서도 사용 가능하다.

특정 컴포넌트가 실행되거나 업데이트(갱신)되거나 제거될 때 특정 이벤트를 발생시킬 수 있다.

 

React 컴포넌트의 생명 주기

• 컴포넌트가 최초에 화면에 등장할 때 : Mount
• 컴포넌트가 state의 변화로 리렌더링될 때 : Update
• 컴포넌트가 화면에서 사라질 때 : Unmount

 

마운트 (mount)

DOM이 생성되고 웹 브라우저상에 나타나는 것이다.

 

업데이트 (mount)

props나 state가 바뀌었을 때 업데이트하는 것이다.

 

언마운트 (unmount)

컴포넌트가 화면에서 사라질(제거될) 때 실행하는 것이다.

 

Mount, Update, Unmount 형태

 

useEffect( () => {}, [] )

• 생성할 때 ( 컴포넌트를 불러올 때 )
• ex) 쇼핑몰 → 상품 목록 불러올 때
• 가장 처음에 사용자한테 보여줘야 하는 부분과 연관된 것들

useEffect( () => {}, [값] )

• 업데이트될 때, 갱신될 떄 ( 값이 변할 때 )
• ex) 쇼핑몰 → 상품리스트에서 카테고리 클릭 시

useEffect( () => { return () => {} }, [] )

• 소멸될 때, 컴포넌트가 사라질 때
• 인증
• ex) 타이머, setTimeout