[TIL] React 재학습하며 배운 기법들

1. useState는 한 컴포넌트에서 한번만 선언하고, 필요한 보든 state를 해당 useState안에 때려넣어 사용하는 방법이 있다.

2. 조건부 렌더링
   3항 연산자보다 단축평가 논리 계산법을 활용하면 좀 더 깔끔하다
   {isSpecial && <b>*</b>}

3. props 값을 생략하면 {true} 로 받는다.
   <Hello name="react" isSpecial >
   이 경우, isSpecial={true} 와 동일하다.

4. state 직전값 활용하기(함수형 수정)
   useState(3) 같이 단일 변수를 사용할 때는 아래와 같이 직전값을 쓸 수 있다.

const [number, setNumber] = useState(0);
const onIncreate = () -> {
  setNumber(prevNumber => prevNumber + 1)
}

그러면 useState가 객체인 경우에는?

const [number, setNumber] = useState({value:0});
const onIncreate = () -> {
  setNumber(prev => ({
    ...prev,
    value: prev.value + 1
  }))
}

5. useState({})에서 사용한 객체는 비구조화 할당으로 바로 꺼내둘 수 있다.

const [myobj, setMyobj] = useState({ key1: 0, key2: 0 });
const {key1, key2} = myobj;
// 이후 myobj.key1 이 아닌 그냥 key1으로 사용할 수 있다

6. useRef 사용법
   useRef는 2가지 방법으로 사용할 수 있는 것 같다.

• useRef로 DOM에 직접 관여하기
  우선 useRef를 선언하고, Dom에서 ref={} 속성을 사용해 할당하면 DOM API를 직접 사용할 수 있다.
  getElementById 를 대체한 개념으로 사용할 수 있겠다. Dom을 선택하는 방법으로 사용가능.
  추가적으로, 하나의 ref를 통해 여러 dom을 사용하는 방법도 있다.(배열을 사용)
• useRef로 변수 다루기
  컴포넌트 내 변수를 선언/사용할 수 있다.
  리랜더링 되어도 초기화되지 않는 변수이며, 리랜더링을 유발하지도 않는다.
  리랜더링을 유발하진 않지만, 저장은 된 값.
  대체로 유저가 보는 화면에 영향없이 어떤 작업을 해야할 경우 사용하는 듯 하다.
  유즈케이스 종류
  • 특정 state 연산에 필요한 변수가 있을 때.
  • 유저가 보는 화면에 변경을 일으키지 않고, 뒷작업을 먼저 해두고(image 다운로드라던가), 나중에 리랜더링 발생될 때 같이 출력하고 싶은 경우
  • 특정 button을 몇번 클릭했는지 로깅
  • setInterval 등으로 모니터링할 때, 특정 횟수까지만 모니터링한 뒤 멈추는 기능을 구현할 때.(멈춤기능 자체는 useEffect로도 가능하다)