[React] React 정리_1

 

 

React란?

 

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

서버는 node.js 

 

jsx 문법 사용한다.

- 보간법 사용

- 백틱 사용 ` `

 

 

---

 

 

npm 간단한 명령어 정리

• npm install -g create-react-app : react 프로젝트 생성
• create-react-app(리액트 앱 환경) template : 리액트 폴더에 이동 후 템플릿 설치
• npm i : 노드 모듈 생성 (node_modules)
• npm start : 서버 시작
• ctlr + c : 서버 종료
• npm run build : 빌드 실행, 배포 직전에 하는 게 좋음! 
• npm install -g server : 빌드한 거로 서버 실행할 거니? 서버 실행
• server -s build : build를 루트로 서버 실행

빌드 후 배포하면 용량이 반으로 줄어든다.

 

 

 

React 사용 이유

1. React LifeCycle - 용량 저하 -> 비용 절감

2. 렌더링

3. 훅 (함수형에서 권장함)

 

 

 

React LifeCycle

초기 렌더링 > 수정 사항 > Virtual Dom > Dom과 비교 후 변경된 것만 렌더링 > Dom

 

 

ES6 기준으로 프로그래밍

ES6 기준으로 프로그래밍한 후 Babel로 버전을 낮 출 수 있다.

 

 

 

 

React Layout

리액트는 하위에서 상위 전달 절대! 네버! 못한다. - 폭포수

상위에서 하위 흐름(단방향) -> 오류를 줄 일 수 있으며 어디서 오류가 났는지 찾기 수월하다!

! Pops : 읽기 전용으로 데이터 전달만 한다!

 

 

 

리렌더링(Rerendring)

뷰를 업데이트할 때 리렌더링한다.

리렌더링을 하면 뷰를 변형시키는 것으로 보이나 사실 render 함수로 인해 새로운 요소로 변경하는 것

데이터를 업데이트했을 때 컴포넌트는 render 함수를 자체 호출해서 새로운 뷰를 생성한다.

 

 

절차 >

1. 데이터의 업데이트

2. 업데이트된 데이터를 이용한 Render 함수의 리렌더링

3. 이전의 컴포넌트, 리렌더링된 컴포넌트의 차이 비교(Virtual Dom)

4. 바뀐 요소들만 Dom에 반영

 

 

Q. 리렌더링 언제 하나요?

1. 상위 요소의 변수값이 변경되었을 때

2. 각각의 컴포넌트마다 변경 가능한 변수를 만든다. 내부에서 사용되는 지역 state 변수

3. 부모 컴포넌트의 리렌더링

4. 강제 업데이트 실행 시

 

 

Q. 리렌더링 최적화 방법?

Hook(인터페이스 모음)

 

 

 

Props (읽기) VS State (변경 처리, 업데이트 기능)

- 데이터 변경 가능성

 

 

클로저

외부 함수 변수에 접근할 수 있는 내부 함수

const [변수명, 변수를 변경할 함수 set_] = useState(변경할 값)

 

 

 

배열 추가하기/ 더하기

- Push

기존 값에 데이터를 합한다.

concat 보다 속도가 빠르다.

 

- concat

기존 값을 유지하고 합한다.

원본의 배열을 그대도 유지하면서 새로운 요소가 포함되는 배열을 만드는 경우에 권장한다.

 

 

 

 

Map()

업데이트 기능 구현 시 사용

 

 

 

Filter()

삭제 기능 구현 시 사용

 

 

 

 

useEffect(( ) => { }, [ ] )

- 특정 조건이 성립할 경우에만 반복적으로 실행함.

- [ ]가 비어있으면 초기 렌더링만 실행함.

- useState가 업데이트될 때에도 실행되지 않음.

- 렌더링 한 번만 할 경우

 

 

 

useRef( )

- 하나의 객체 안에서. current를 통해서 데이터를 관리함.

- 주소 값에 메서드를 지님.

 

ref = reference = 참조값

데이터 접근 흐름. current

 

 

 

 

useCallBack()

const ass = useCallback(() => x+y);

 

특정 함수를 재사용할 때 사용

두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해 놓고 재사용할 수 있게 해 준다.