📚TIL

day41

컴포넌트 - 실습

• 함수, class를 사용하여 컴포넌트 생성
• props : 함수 파라미터로 데이터를 주고 받을 수 있음
• defaultProps : 값을 넘기지 않았을 경우를 대비해 defaultProps를 통해 default 값을 지정해 놓을 수 있음
• propTypes : 넘겨진 값의 타입을 지정할 수 있으며 타입이 다른 경우 에러 발생 - prop이 안정적으로 작동하게 하기 위해 지정 권장

event Binding

• 이벤트가 발생했을 때 실행될 함수를 정이한 후 만들어진 함수를 이벤트 바인딩 해주기
• onClick, onMouseDown, onInput, onKeyDown, onMouse ...

useState & useRef 차이

• useState : 상태의 기본값을 파라미터로 넣어서 호출해주며 첫번째 인자는 state, 두번째 인자는 setter함수
• useRef : 돔에 직접 접근할 때 또는 지역변수로 사용
• 차이점 : useState는 값이 변경될 때 다시 렌더링하지만 useRef는 값이 변경되더라도 다시 렌더링하지 않음
• React.forwardRef : 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하여 부모가 자식 ref 참조하도록 함

day42

컴포넌트 스타일링

• stylesheet 이용하기
• inline 스타일 적용하기
• css인 JS 적용하기 : emotion 사용
• emotion을 이용한 styled 컴포넌트 : 즉시 스타일이 적용된 컴포넌트를 만들어 줄 수 있음

React Hook

• 함수 컴포넌트에서 Hook을 통해 함수 내부에 있는 상태 관리 가능
• useMemo : 렌더링이 필요하지 않은 부분을 리렌더링 하지 않도록 최적화를 위해서 사용하는 훅
• React.memo : 자식 컴포넌트가 변경되지 않았을 경우에는 다시 렌더링되지 않도록 막아 자식 컴포넌트들의 최적화
• useCallback : 함수가 재정의되어 렌더링되는 것을 막기 위해 사용

🎨2021. 10. 13

리액트를 배워보니 상태관리를 위해 다양한 함수와 훅이 있다는 생각이 들었다. Vanilla JS를 하면서 상태 관리를 하는 것이 굉장히 어려웠는데 리액트 Hook을 사용하면 보다 쉽게할 수 있을 것 같다. 그러나 기능이 많은 만큼 사용하는 상황이 헷갈리고 배워야 할 것들이 늘어나면서 더 많은 시간을 들여서 공부해야겠다. vue와 다른 부분이 있어서 문법적으로도 헷갈리지만 실습을 계속 해보면서 어서 익숙해져야겠다~!
내일도 리액트 강의 듣기!