시작 전에 개발환경 어디서나 맞추는 방법
- 기본적인 src 폴더 와 package.json 파일만 있으면 됨
- github에 올릴 때 gitignore에 node_modules 폴더 등록 되어 업로드 제외
- package.json을 통해 npm install 하면 해당 웹에 필요한 패키지 다운로드함으로 개발 가능
함수 컴포넌트와 클래스 컴포넌트
매개변수 안에 비구조화 할당 방법
1. (props)로 받아와 props.name으로 접근
2. ({name}) 으로 name 바로 접근
함수형 컴포넌트
- 단순히 값(props)만 받아와서 보여주는 경우
- 불필요한 기능이 없고 초기 마운트 속도가 클래스 컴포넌트보다 빠름
- 메모리 사용에도 효율적이지만 상당히 큰 웹이 아니면 성능차이 별로 없음
클래스 컴포넌트
- 클래스 컴포넌트에는 라이프사이클 메소드 및 state 사용 가능
- 화살표 함수 사용하지 않으면 아래 코드 처럼 번거로운 bind 작업이 필요❗
- 클래스형 컴포넌트는 인스턴스 생성에 의해 부하가 생김 단점❗❗❗
constructor(props){
super(props);
this.handle = this.handle.bind(this);
}
⭐잠깐 알고 가세요!!⭐
React Hooks❓❓
- 함수형 컴포넌트에서 클래스형 컴포넌트 기능들을 사용할 수 있도록 해주는 리액트의 새로운 기능
- 리액트 16.8v 부터 사용 가능
LifeCycle
Mounting
- 컴포넌트가 브라우저에 렌더 될 시 실행
- contructor을 가장 먼저 실행 : 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 컴포넌트에는 생성자를 구현 X
- getDerivedStateFromProps : props를 받은 값을 state로 동기화
- componentDidMount : 외부라이브러리 연동(D3), 컴포넌트에 필요한 데이터요청(Ajax,GraphQL),Dom에 관련된 작업:스크롤 설정,크기
Updating
-
props나 state가 변경시 실행
-
shouldComponentUpdate : 컴포넌트가 업데이트 되는 성능 최적화, 실제 사용자가 사용하는 브라우저에서는 가상 DOM과 비교하여 변경된 사항만 렌더해주기 때문에 사용자 입장은 필요 없고 가상 DOM에서 최적화 해서 사용하기 위함
true면 렌더링 false면 멈춤
불변성 유지에 중요한 단계❗
// 디폴트는 true
if(this.state !== nextState){
return true;}
return this.props.info !== nextProps.info;
- componentDidUpdate : 컴포넌트 업데이트시 호출, NextPorps 및 NextState 값 이용해서 변경 시 어떤 작업 실행
UnMounting
- 컴포넌트 삭제 시 어떤 작업 실행
불변성(Immutabe)에 중요성❗❗❗
- state의 원본의 값을 그대로 사용하는 것이 아닌 복제를 통해 새로운 값을 변경함으로써 setState를 해줘야 리렌더링 가능❗❗❗
- this.state = 와 같이 직접 접근해서 바꾸면 리렌더링이 이루어지지 않음
- 무조건 setState를 이용해서 변경!!
- 여러개의 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하려면 부모 컴포넌트에 공유 state를 정의
- 부모 컴포넌트는 props를 사용하여 자식 컴포넌트에 state를 다시 전달 가능 (부모 자식 값 동기화)
- state를 부모 컴포넌트로 끌어올리는 것은 React 컴포넌트를 리팩토링할 때 흔히 사용
DOM에 직접 접근하는 방법 ref
1. ref={ref=>this.input = ref}
// this.input은 해당 지정한 input을 가리킴
2.import React, { useRef } from "react";
const inputRef = useRef(null);
<input ref={inputRef}/>
input.current.focus();
// 해당 태그에 ref={this.input} 해야 함
// 그리고 이벤트 등록시
// this.input.current.focus() 해줘야 함
- 어떤 작업 시 요소의 특정 값을 불려오려고 할 때 사용
- https://velopert.com/3613
react 특징, 라이프사이클 내용 및 사진 - http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
리액트 라이프 사이클 버전 체크
Front End. Dev