02 - 11 일지

오전, 오후 - 리액트 Hook 공부

특이사항

 

스타일드 컴포넌트

 

순수한 CSS말고 JS로 구현하는 것이다

 

글로벌 스타일링

컴포넌트 안에서만 쓸 수 있는 스타일드 컴포넌트와 달리 프로젝트 전체에 들어가야할 스타일을 적용해야하는 순간이 온다. 이럴 때 쓰는 것이다. 글꼴 따위를 말이다.

 

Sass

css를 더 효율적으로 쓰기 위해 만들어진 언어. css는 규모가 커질수록 심하게 비효율적으로 복잡해지기에 휴먼 에러를 피하기 위한 언어라고 할 수 있다.

특징으로는 변수 사용 가능, 중첩 가능, 타 style을 import 가능이다.

 

useState

가장 기본적인 hook 기능, 함수 컴포넌트에 가변적 상태 부여. 불변성을 유지해줘야 한다.

 

useEffect

본격적으로 들어가는 hook 기능, 컴포넌트가 랜더링 될 때 마다 행동해야하는 특정 작업을 지시하기 위해 쓰인다. state값이 바뀔 때 마다 실행되기 때문에 의존성배열이란 것을 만들어야 한다. 배열에 값을 넣으면 그 값이 바뀔 때만 effect를 발동시킨다고 선언하는 것이다.

구조는

useEffect(()=>{
 
// 실행하고 싶은 함수
 
}, [의존성배열])

이다. 의존성배열이란 ‘이 배열에 값을 넣으면 그 값이 바뀔 때만 effect를 발동시킨다’라고 선언시키는 것이다. 공백 배열을 넣으면 처음 랜더링 되는 단 한 번만 발동되게 할 수 있다. 유니티로 치면 awake같은 기능이군. 유니티와 다른 점이라면 useeffect는 여러 번 쓸 수 있다는 것이다. 물론 조건은 상이해야하지만...

 

useref

네이버에 접속하면 자동으로 검색창에 포커싱이 되는 것처럼, 의도적으로 특정 DOM을 강제로 선택해야 하는 상황이라면 쓴다. useref는 값의 변화가 있어도 렌더링하지 않는다. 즉 랜더링으로 ref의 변수들이 초기화 되는 것을 막을 수 있다.

 

usecontext

부모-자식 순으로 컴포넌트를 전달해주는 경우가 많다. 보통은 그럴 때 props를 사용했다. 쓰는 단어 명칭을 다르게 해도 되지만 뭐...일반적으로 props라 하니 이렇게 부르고 쓴다. 그런데 이게 끝도없이 길어지는 props drilling이 일어나면 골아파진다. 그래서 등장한 것이 context API 개념이다.

사용법은

import {createContext} from "react"

를 쓰면 된다. 정보를 집어넣을 때에는

<콘텍스트이름.Porvider value = {{들어갈 무언가}}>
 
</콘텍스트이름.Porvider>

로 넣는다. 주의할 것은 이 기능을 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다는 것이다. 따라서 value 부분을 항상 신경써줘야 한다. 휴먼 에러 피하려고 만들었더니 신경 쓸 것이 더 늘었구만...