React
1.props, state
props, state
2.React class & func
클래스, 함수 스타일 컴퍼넌트
3.jsx
jsx
4.Props
구조분해를 통해 코드를 정리할 수 있다. defaultProps (기본값)
5.event.target
event.target
6.Input 상태
7.여러개의 Input
8.useRef
useRef로 특정DOM 선택하기
9.배열 랜더링
10.useRef로 component 안에 변수만들기
useRef로 컨포넌트 안의 변수 만들기 어떤값을 바꿨을 때 리랜더링 할 필요가 없을 때 useRef를 사용한다 컴퍼넌트가 리랜더링 될때마다 계속 기억 할 수 있는 어떠한 값을 관리 할 때 사용한다. ex) setTimeOut, setInterval의 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 ... useRef를 사용하는 컴...
11.useEffect
useEffect는 페이지가 랜더링 될 때마다 작업을 처리하는 역할을 한다. 컴포넌트가 실행될 때마다 아래에 console.log("안녕하세요") 가 실행되게 된다. useEffect는 두번째 파라미터를 받는데 [] 형식으로 작성한다. 만약 배열안에 값이 아무것도 없다면 랜더링 될 때 한번만 실행이 되고 값이 있는 경우 그 값이 변경될 때마다 실행이 된다...
12.useMemo
함수의 값을 재사용한다. 주로 성능을 최적화 할때 사용한다.
13.useCallback
함수의 재사용 useCallback을 사용하지 않으면 컴포넌트가 랜더링 될 때마다 함수들이 실행되게 된다. 두번째 파라미터에는 []값이 들어가는데 이 값이 변결 될 때마다 함수가 실행된다.
14.React.memo
컴포넌트 리렌더링 방지, 성능 최적화를 할 수 있다. 사용방법은 컴포넌트를 내보낼때 React.memo로 감싸주면 된다. onRemove, onToggle을 살펴보면 deps에 users를 포함하고있다. users가 바뀌면 onRemove, onToggle도 바뀌고 `` 입장에서 보면 onRemove, onToggle이 바뀌었으니 내부에 있는 것도 전부 ...