[TIL] Day-41

리액트를 배우는 첫날이다.
데브코스 진행 전에 독학으로 조금 배웠었는데 너무 어려웠어서
걱정됐다.. 직전에 했던 vue는 너무 쉬워서 솔직히 리액트 안하고 vue만 하고싶었다. 그런데 강의에서는 함수형으로 코드를 짜고 react hook을 사용했는데 vue랑 개념이 거의 비슷하고 독학했을 때 class를 사용했던 것에 비해 쉽고 간단해서 아직 기초이긴하지만 리액트도 나름대로 재미있게 학습하는 중이다.
생각해보면 내가 아직 class 사용이 미숙해서 그런 것 같다. 데브코스에서는 함수를 많이 쓰고 있지만 class 사용법도 공부하고 익혀야겠다.

리액트의 핵심 포인트

반응형 프로그래밍
상태가 변하는 경우 의존된 다른 것도 연쇄적으로 반응하여 변하게 됨

컴포넌트

• 한 컴포넌트 안에는 html, style, js, event, state가 담겨있다.

• 재사용이 가능한 컴포넌트 만들기 → UI를 추상적으로 바라보기
  = 공통점을 찾아서 공통점 부분만 컴포넌트 뼈대로 만들고 다른 부분은 밖에서
  받아서 확장성있게 사용해야 재사용을 할 수 있다.

• 트리구조로 데이터는 상위에서 아래로만 흐른다

virtual Dom

JSX

• 가상 돔을 정의하는 것
• 컴포넌트 생성 함수에서 return하여 작성한다.
• html에 js표현식과 문법을 사용할 수 있다.
• 반드시 최상위 요소가 1개 여야한다 ⇒ 2개 이상 필요하다면 다른 태그나 <></>로 묶는다
• 표현식이나 조건, 반복을 사용할 수 있다

변수, 표현식 이용 - {}로 묶어줘야한다

조건 이용 - 삼항 연산자, 논리 연산자

반복 이용 - map 사용 (*key를 꼭 넣어줘야 성능 최적화를 해줄 수 있다.)

React Hook

use로 시작하는 함수는 함수 컴포넌트에서 훅이라고 부르는데, 상태를 관리할 때 사용한다.

useState

상태를 저장할 변수와 상태를 변화시킬 함수를 제공하는 Hook.
이름은 마음대로 설정할 수 있음(ex- count, setCount)

import { useState } from 'react'
const [state, setState] = useState(0)

useEffect

등록해놓은 state에 변화가 있을 때 감지하여 반응하는(설정한 로직을 수행하는) Hook.

두번째 인자에 감시할 state를 등록하는데, 아무것도 등록하지 않았다면
컴포넌트 생성시에 실행되는 라이프사이클로 사용할 수 있다.

import { useEffect } from 'react'

// 1.첫번째 인자로 수행할 로직, 두번째 인자로 감시할 데이터를 배열 형태로 넣어준다
useEffect(() => {
  useEffect(() => {
    console.log(`You clicked ${count} times.`)
  }, [count])

// 2.초기 이벤트, 전역 이벤트, api호출 시 이용
useEffect(() => {
    console.log(`init!`)
    document.addEventListener('scroll', () => {}) 
    return document.removeEventListener('scroll', () => {}) 
    // return은 컴포넌트가 제거될 때 실행되기 때문에 전역이벤트를 걸었다면 반드시 해제해줘야 함
  }, [])

useRef

1. DOM에 직접 접근할 때 사용한다.
2. 지역 변수로 사용한다.

지역 변수로 사용할 수 있는 이유
useState는 값이 변경될 때 다시 렌더링을 하지만
useRef는 값이 변경되더라도 다시 렌더링을 하지 않는다.

=> useRef()는 빈 객체를 만들어주는 건데 엘리먼트에 연결할 시 엘리먼트의 메소드와 프로퍼티를 가져와서 저장한다

원하는 이름의 변수를 만든 후 useRef함수를 실행해준다

DOM에 접근할 시
사용하려는 엘리먼트에 ref속성 값으로 생성한 변수를 넣어준다
자식 컴포넌트에게 내려줄 때는 React.forwardRef함수를 사용한다.

전역 변수로 사용 시
useRef함수의 반환 값이 담긴 변수의 .current에 원하는 값을 담아준다

import { useRef } from 'react'

// DOM에 접근할 시
function App() {
  const inputRef = useRef()
  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
      <AutoCounter />
    </div>
  )
}

// 전역 변수로 사용 시
const AutoCounter = () => {
  const [count, setCount] = useState(0)
  const intervalid = useRef() // 엘리먼트에 연결 안해주면 전역 변수로 사용 가능하다 -> intervalid.current에 담아야 함

  const handleStart = () => {
    intervalid.current = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)
  }