React 02

styled-components

• React의 CSS 스타일링 방법 중 하나

  • CSS파일이 아닌 JS에 바로 작성
  • 컴포넌트 호출 시 필요한 코드만 호출(필요한 컴포넌트 내에 작성)
  • className을 사용하지 않아 겹치는 오류 방지

• 단점

  • CSS를 줘야할 태그들을 전부 컴포넌트화 해야 한다.
  • 가독성이 떨어진다.
  • CSS를 수정할때 수정할 컴포넌트 파일을 직접 찾아야한다.

• 그 외의 방법

  • SASS, SCSS
  • 복잡한 작업을 쉽게 해주고, 코드의 재활용성을 높여줌
  • CSS 내에서 변수가 사용이 가능
  • 코드의 가독성을 높여주고 유지보수를 쉽게 함

• Emotion

  • styled-components와 대체될 수 있는 유망, 사용법이 비슷함.

  사용법

  npm install styled-components
  
  위와 같이 스타일을 정의하고 싶은 태그를 컴포넌트화 하고 컴포넌트 정의 부분에서 styled.태그명으로 스타일을 정의하고 있다.

  주의
  태그를 생성해서 부모태그로써 생성됨으로 자식, 손자태그까지 스타일이 적용되지 않을 수 있다.

  Hooks

• 리엑트 편하게 쓰게할 수 있는 기능

React에는 개발 방법에 2가지가 있다.

함수형과 클래스형

Class형

  class 클래스명 extends Components {
  };

Class는 다양한 기능을 사용할 수 있지만 Class는 기계와 사용자로 혼돈시킨다.
숙련된 React 개발자조차도 Class의 완벽한 이해는 힘든 일

---

function 형

• 현재 가장 많이 쓰이는 방식
• Hooks의 영향으로 많은 Class를 사용하는 개발자와 기업들이 function으로 전환
• 본래 Class의 React 상태관리 (라이프 사이클)을 훨씬 편리하게 해준다.

useState

-> Hooks의 상태관리 함수
-> 컴포넌트에서 바뀌는 값 관리
-> 값이 바뀐 것을 감지, 랜더링

useRef

-> JavaScript getElementById, querySelector 같이 DOM selector 함수처럼 React에서 Dom에 접근하게 되는 일이 생긴다면 접근하게 해주는 Hooks함수