[React] React(1)

❗❗  데브코스 51일차 (10.11)

고대하던 React 파트가 시작되었다.

일주일이라는 짧은 기간 동안 React에 대해 학습하게 된다.

(Vue 프로젝트 기간에 강의가 제공되기 때문에  총 2주간이다.)

영상이 짧기 때문에 핵심 위주로 학습이 진행된다.

 

✅ 컴포넌트 이론

재사용 성과 확장성을 처음부터 생각하는 것은 쉽지 않다.

컴포넌트 구조, 아키텍처, 클린 코드는 잠시 잊고 눈에 보이는 UI를 컴포넌트로 구현해 보자.

 

컴포넌트 구조는 팀마다 다르기 때문에 규칙을 정하는 것이 중요하다. ex) 도메인으로 분류, 역할로 분류, 크기로 분류 등

크기로 분류하는 Atomic Design에 대한 추천 블로그

https://kciter.so/posts/effective-atomic-design

Effective Atomic Design

 

✅ useEffect

• 무언가 변화가 있을 때 감지하는 감지하여 반응하는 hook
• class 컴포넌트 LifeCycle의 componentDidMount, componentDidUpdate와 비슷하게 동작한다.
• [의존성이 필요한 변수]에 아무런 값도 넣지 않을 경우 최초 컴포넌트 렌더링 시에만, 동작한다. => componentDidMount
• [의존성이 필요한 변수]에 값을 넣을 경우 최초 렌더링 + 변화가 있을 경우 동작한다. => componentDidMount + componentDidUpdate

//사용 문법
useEffect(() => {
  실행할 코드(콜백함수)
}, [의존성이 필요한 변수]);

사용 예시 1

//의존성이 있는 경우 최초 렌더링 + 상태 변화 시
const myButton = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count)
  },[count]);

  const updateCount = () => {
    setCount(countClick + 1);
  };

  return (
    <button onClick={ updateCount }>
      Click Me
    </button>
  )
};

사용 예시 2

//의존성이 없는 경우 최초 렌더링 시 
  useEffect(() => {
    const handleScroll = () => {
      console.log(window.scrillY);
    }
    //전역적인 이벤트를 사용할 때 쓸 수 있다.
    document.addEventListener("scroll",handleScroll);
    //정리(clean-up)가 필요한 경우
    return () => document.removeEventListener("scroll",handleScroll);
  },[]);

• 컴포넌트가 처음 로드될 때 실행된다.
• 전역적으로 이벤트를 등록하면 scroll 이벤트가 발생할 때마다 console.log가 찍힌다.
• return으로 전역 이벤트를 제거 시켜준다. return으로 반환한 함수는 컴포넌트가 제거(언마운트)될 때 실행된다.
  • effect는 한 번이 아니라 렌더링이 실행되는 때마다 실행된다. React가 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect 또한 정리하는 이유가 바로 이 때문이다.
  • 메모리 누수방지 : 컴포넌트가 언마운트될 때, return을 통해 해당 이벤트를 정리해주는데 이것을 정리해주지 않으면 메모리 차원에서 가지고 있기 때문에 최적화에 문제가 생길 수도 있다.
  • sideEffect 방지: setTimeout과 같은 hook을 사용한다고 했을 때, 페이지 이동하거나 컴포넌트가 사라졌을 때 timeOut이 그대로 남아있어서 실행되는 버그가 발생할 수 있다.!

✅ useRef

• DOM에 직접 접근할 때 사용한다.

function TextInputWithFocusButton() {
  const inputRef = useRef(null);

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={() => inputRef.current.focus()}>Focus the input</button>
    </>
  );
}

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

function TextInputWithFocusButton() {
  const id = useRef(1);
  const setId = n => {
    id.current = n;
  }
  const printId = () => {
    console.log(id.current);
  }
  return (
    <>refSample</>
  );
}

 

👨‍💻 강의 자체가 React 기초를 다루는 것이 아니라, 핵심 위주로 진행되다 보니, React가 처음이면 다소 어렵다고 느껴질 것 같았다. 전 React를 다뤄 보았지만, 이론은 깊게 파고든 적이 없어서 아주 흥미롭게 수업을 들을 수 있었다. 

useEffect에서 전역 이벤트를 다룰 때 return을 해야 하는 것과, useRef를 지역 변수로 사용할 수 있다는 점을 알게 되었다.

 

📖 학습한 내용

• React(1)
  
  • React 소개
  • create-react-app, JSX
  • 컴포넌트-이론
  • 컴포넌트-실습
  • 상태와 이벤트 바인딩
  • useEffect
  • useRef