Class Component
- 리액트는 훅이 나오기 전까지 상태관리는 클래스 컴포넌트로 만들어 구성하였다.
- 리액트는 훅이 나오기 전까지 상태관리는 클래스 컴포넌트로 만들어 구성하였다.
- 리액트 훅이 나오고 난 이후 최근 대부분의 리액트 앱은 함수형으로 구성된다.
- create-react-app 으로 만든앱에서 components 디렉토리를 만든다.
- React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋다.
- 조건부 렌더링은 말 그대로 조건에 맞는 경우에 해당하는 컴포넌트를 보여주는 것이다.
- html에 react를 cdn으로 받아서 사용하는 방법은 일반적이지 않다.
- React Event 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SynthenticEvent 객체를 전달받는다.
- 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조직을 개별적으로 관리할 수 있다.
- React 에서 기존 html 소스를 그대로 가져와 사용할 수 있다
- phoneNumber input 태그에 값이 0부터 시작되면 valid, 1부터 시작되면 invalid 하게 처리하는 로직을 구현한다.
- hook이 호출되는 타이밍을 확인하기 위해 간단한 예제를 구현한다.
Hook Flow 이해하기 더 깊이
개요
Clean-up을 이용하지 않는 Effects
- 커스텀 훅은 여러 Hook들을 모아 놓은 함수이다.
- 바닐라 JS에서는 getElementById('').focus()로 포커스를 준다.
Xcode 14 Release Note 정리
제어 컴포넌트
- 일반적인 css로 html에 element에 스타일을 넣어주는 방식과 크게 다르지 않다.
- JS에러 발생 시 React 뷰를 보여주지 못하고 에러가 발생할 수 있다.
- 투두 리스트를 삭제하고 되돌리는 프로그램을 구현해보자.
리스트 변환
- 뷰모 뷰에서 하위 뷰의 상태 값을 사용해야 하는 경우 부모 뷰에서 상태를 선언하고 하위 뷰에 상태를 주입하여 사용할 수 있다.
- input 필드와 button을 구현한다.
이벤트
- useState, useEffect이 여러번 사용되면, 문맥에 따라 hook들을 묶어서 커스텀 훅으로 만들 수 있다.
- 부작용, 의도하지 않은 효과
- DOM은 논리 트리, 컴포넌트는 엘리먼트의 집합, 엘리먼트는 요소이다.