2023.06.19
오늘의 회고
다시 시작된 리액트 강의 듣기! 이 번주는 리액트 숙련 주차이다.
Styled Components
styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지
styled-components를 생성하는 기본적인 코드!
const StBox = styled.div``;styled-components는 특성 상 조건부 스타일링을 할 수 있다.
처음 배우는 CSS-in-JS이라서 아직 익숙하지 않다. 이 번주 과제에 적용해보면서 익숙하게 만들자.
React Hooks
오늘은 React Hooks 중 useEffect와 useRef, useContext
를 알게 되었다.
- useEffect : 화면에 컴포넌트가 mount 또는 unmount 됐을 때 실행하고자 하는 함수를 제어하게 해주는 훅이다.
- useRef : DOM 요소에 접근할 수 있도록 하는 React Hook.
- useContext : prop drilling현상을 방지하고 전역 데이터를 관리한다.
지난 주차에서는 필요성을 느낄 수는 없었으나 강의를 들으면서 꼭 알아야 하는 훅인 것 같다.
React를 개발하면서 필요하지 않은 렌더링이 발생할 때를 대비해 최적화가 필요하다. 최적화를 위해 배워야 할 훅(React.memo, useCallback, useMemo) 계속 공부하자!
개발공부!