-
react 정리(정리중)Front-End/React 2019. 2. 20. 19:55
리액트를 다루는 기술(길벗) 정리한 내용입니다.
react
사용목적
DOM은 느리지 않다.
느린것은 내용이 많은 DOM을 수정하는 행위 자체가 리소스를 많이 잡아 먹기 때문에 느리다고 하는것이다.
페이스북처럼 계속 스크롤을 내려가면서 새로운 페이지들이 나오거나 하면 react가 좋은 솔루션일 것이다.
반면 정적이고 DOM이 크지 않으면 REACT를 사용안하는것이 좋을 수도 있다.
react는 라이브러리 -> (리액트와 같이 쓸 수 있는)수많은 라이브러리가 존재
angular.js는프레임 워크
node.js
node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 node.js를 사용하기 때문에 설치해야함
ecmas6를 ecmas5로 버전을 호환시켜주는 바벨(babel)
bable(babel-loader) -> js파일들을 불러오면서 es6로 작성된 코드를 es5 문법으로 변환해줌
모듈화된 코드를 한 파일로 합치고(번들링) 코드를 수정할 때마다 웹브라우저를 리로딩하는 등 여러 기능을 지닌 webpack
npm-> node.js패키지 매니저로 모듈을 설치하고 해당 모듈 버전을 관리하는 도구
nvm 도구-> node.js버전을 업데이트하거나 프로젝트별로 버전이 다른 node.js를 사용해야 할 때 필요
jsx -> 자바스크립트 확장문법
자바스크립트 표현식을 작성하려면 jsx내부에서 코드를 {}로 감싸면 된다.
jsx내부의 자바스크립트 표현식에서 if문을 사용할 수 없다.
하지만 조건에 따라 다른 것을 렌더링해야 할 때는 jsx밖에서 if문을 사용하여 작업하거나 {}안에 조건부 (삼항연산자)를 사용하면된다.
props-> 컴포넌트의 속성 값을 가진다. => 부모 컴포넌트가 설정
state-> 컴포넌트의 상태값을 가진다. => 컴포넌트가 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트한다.
function()을 사용했을때는 자신이 종속된 객체를 this로 가르키며, ()=> 함수는 자신이 종속된 인스턴스를 가르킵니다.
function BlackDog() {
this.name = '흰둥이';
return {
name: '검둥이1',
bark: function() {
console.log (this.name + ': 멍멍!');
}
}
}
const blackDog = new BlackDog();
blackDog.bark(); / / 검둥이: 멍멍!
function WhiteDog() {
this.name = '흰둥이';
return {
name: '검둥이',
bark: () => {
console.log ( this.name + ': 멍멍!');
}
}
}
const whiteDog = new WhiteDog();
whiteDog.bark(); / / 흰둥이: 멍멍!
react에서 event 사용시 주의사항
1. 이벤트 이름은 camelCase로 작성한다. onkeyup->onKeyUp, onclick->onClick
2. 이벤트에 실행할 자바스크립트 코드를 전달하는것이 아니라, 함수 형태의 값을 전달
3. DOM 요소에만 이벤트를 설정할 수 있다. 컴포넌트 자체에 이벤트를 설정할 수는 없다.
node.js 사이트 방문 설치
yarn 설치
node.js와 같이 설치한 npm은 의존하는 라이브러리 개수가 많음녀 속도가 매우 저하되고, 의존하는 버전이 설치되는 시점을 기준으로 결정하기
때문에 설치하는 시기에 따라 다른 버전을 설치할 가능성이 있다.
(2018년 5월 현재 npm 최신 버전인 v5 에서는 이 이슈를 해결했지만. LTS 버전에서 사용하는 v3에서는 이 기능을 지원하지 않습니다) (lts 10버전에서는 어떤지 확인 필요)
1. ESLint(자바스크립트 문법을 체크합니다)*
2. Relative Path(상대 경로에 있는 파일 경로를 편하게 작성할 수 있는 도구입니다)
3. Guides(들여쓰기 가이드라인을 그려 줍니다)
4. Reactjs code snippets(리액트 관련 스니펫 모음으로 종류가 꽤 많은데，제작자가 Charalampos Karypidis인 것을 설치하세요)*
5. React-beautify(리액트 코드를 정리합니다)
*-> 꼭 설치
//트 매뉴얼(https://facebook.github.io/react/docs/events.html)
3. 언마운트
언마운트하기 -> componentWillUnmount
3-1. componentWillUnmount=> 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출
5.3장
컴포넌트에 ref 달기-> 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓴다.
중요)
7장 컴포넌트의 라이프사이클 메서드
라이프 사이클은 총 세가지로 나뉜다.
1. 마운트(DOM이 생성되고 웹브라우저상에 나타나는 것)
컴포넌트 만들기-> constructor -> getDerivedStateFromProps -> render -> componentDidMount
1-1. constructor=> 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
1-2. getDerivedStateFromProps=> props에 있는값을 state에 동기화하는 메서드
1-3. render=> 개발자가 준비한 UI를 렌더링 하는 메서드
1-4. componentDidMount=> 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드
2. 업데이트(props변경 혹은 부모 컴포넌트가 리렌더링 될때)
getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
2-1. getDerivedStateFromProps=> 마운트 과정에서도 호출되며, props가 바뀌어도 호출됨
2-2. shouldComponetUpdate=> 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정, false 반환시 하위 메서드 호출 안함
2-3. render=> 컴포넌트를 렌더링함
2-4. getSnapshotBeforeUpdate=> 컴포넌틀 변화를 DOM에 반영하기 바로 직전에 호출
2-5. componentDidUpdate=> 컴포넌트 업데이트 작업이 끝난후 호출
12. 리덕스 개념 이해
상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리
전개연산자(...)
리덕스 스토어를 구독(subscribe)한다는 것은 리덕스 스토어의 상태가 바뀔 때마다 특정 함수를 실행 시킨다는 의미
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
const increment = (diff) => ({
type: INCREMENT,
diff: diff
});
const decrement = (diff) => ({
type: DECREMENT,
diff: diff
});
//console.log(increment(1));
//console.log(decrement(1));
const initialState = {
number: 1,
foo : 'bar',
baz : 'qux'
}
function counter(state = initialState, action){
switch(action.type){
case INCREMENT:
return {
...state,
number: state.number + action.diff
};
case DECREMENT:
return {
...state,
number: state.number - action.diff
};
default:
return state;
}
}
//console.log(counter(undefined, increment(1)));
const {createStore} = Redux;
const store = createStore(counter);
const unsubscribe =store.subscribe(()=> {
console.log(store.getState());
});
store.dispatch(increment(1));
store.dispatch(decrement(5));
store.dispatch(increment(10));
12.3 리덕스의 세 가지 규칙
1. 스토어는 단 한개
2. state는 읽기 전용
3. 변화는 순수 함수로 구성(리듀서 함수를 가르킴)=> ex)리듀서 함수 내부에서 외부 네트워크와 데이터베이스에 직접 접근하면 안됨(요청실패할 수도 있고, 외부 서버의 반환 값이 변할가능성)
-> 스토어는 리덕스에서 가장 핵심적인 인스턴스(현재상태 내장및 상태를 업데이트할 때마다 구독 중인 함수들을 호출)