코드스테이츠FEB [44번째 배운내용]

📝 오늘 학습한 내용

22/06/30
어느덧 6월도 마지막이다. 오늘은 Component Driven Development의 약자인 CDD에 대해서 배웠다. 결론부터 말하면 CSS를 컴포넌트화하고, JS 파일에 관리하도록 하는 방법론 같은 것. 그 라이브러리 중 하나인 styled components를 학습 중에 있다. 프로젝트 하며 css 때문에 불편한 적이 한두 번 아니었고, 리액트 사용 시 jsx로 html까지 한 번에 쓰다 보니 css도 한 번에 할 수 없을까 생각을 했었는데 마침 배우게 되었다. 그 외 UI 개발도구인 Storybook , useRef 함수도 함께 학습했다.

🤔 어려웠던내용

useRef 내용중 재랜더링이 되지않아 유용하다는 것을 배웠다.
아래는 useRef를 이용하여 새로고침후 첫 렌더링시 인풋 칸에 자동으로 포커스가 있는 코드인데,

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>);
}

제시된 상황 제외한 대부분의 경우 기본 React 문법을 벗어나 useRef 를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 합니다.

코드 스테이츠에서 이런 내용을 제공해 줬다. 어떤 것이 위험한 상황인지 잘 모르겠다. 그리고, useRef()안에 null 값을 입력해 줬는데, 왜 null 을 입력했을까? 아무것도 넣지 않아도 포커스가 잘 실행될 터인데 아직 다루는 방법이 익숙하지 않다.