React 기본 강좌 정리 - 3~4

import

require : node 의 모듈시스템

import 와 require 는 호환이 되긴한다.

import 를 쓰면 babel 이 require 로 변환해준다.

 

export

엄밀히 따지면 export defaut 와 module.export 는 다르다.

export 되는게 객체나 배열이면 구조분해하여 import 할 수 있다.

export 는 여러개 올수 있으나 export default 는 단 한번만 나올 수 있다.

 

defaultValue

value 와 onChange 는 같이 써야된다.

두 조합을 쓰기 싫다면 defaultValue 를 써야한다.

 

map

<ul>
    {["A", "B", "C", "D"].map((alphabet) => {
        return (
            <li> 
                {alphabet}
            </li>
        );
    })}
</ul>

배열에서 사용할 수 있는 함수. callback function 에 인덱스를 같이 받아올 수 있다. ex) (alphabet, i) => { ... }

리액트에서는 render 의 return 안에서 for 와 if 를 바로 쓸 수 없다. (함수 호출로 불러와서 쓰거나 즉시 실행함수로 하려면 할 수 있긴 하다) 그래서 다른 방식으로 표현해야 한다.

for -> map

if -> 3항 연산자

 

 

key

<ul>
    {["A", "B", "C", "D"].map((alphabet) => {
        return (
            <li key={alphabet}> 
                {alphabet}
            </li>
        );
    })}
</ul>

반복문으로 태그를 만들때 반드시 최상위 태그에 key 를 전달해줘야한다. 리액트는 key 를 보고 같은 컴포넌트인지 아닌지 판단한다. 리액트가 작업할 때 사용하는 값이기 때문에 반드시 고유한 값이 필요하다. 키 값은 인덱스 같은 값을 쓰지 않는 것이 좋다. (만약 배열에 원소가 추가 삭제 될 가능성이 있다면 같은 인덱스라고 같은 컴포넌트라 보장할 수 없으므로.)

 

state, props

멤버변수 : 컴포넌트 내에서 변하는 값

this.state : 컴포넌트 내에서 변하는 값 + 렌더링이 필요한 값

this.props : 부모 컴포넌트에서 전달해주는 값

this.state 안의 임의의 멤버 변수 배열에 push 해놓고 렌더링이 안된다고 생각하는 실수 많이한다.

원칙) 자기자신의 props 는 절대 자기자신이 바꿔서는 안된다. 왜냐하면 props 는 부모 컴포넌트에서 내려준 값인데 자기 자신의 변화가 부모 컴포넌트에 영향을 주기 때문. 만약 props 를 바꿔야할 일이 있다면 props를 state 로 만든 다음 그 state 를 바꿔야한다. 

 

React development tools

리액트 개발에 도움을 주는 확장 프로그램

아이콘이 빨간색이면 개발 모드라는 의미

배포환경이라면 webpack 설정으로 production 으로 변경해줘야한다.

Highlight update 를 활성화 해놓으면 사용자의 동작에 렌더링되는 컴포넌트들을 확인할 수 있다.

 

shouldComponentUpdate

this.setState 를 호출하기만해도 렌더링이 된다. (즉 this.setState({}) 를 실행하기만해도 렌더링이된다)

렌더링을 줄이기 위해 사용할만한 괜찮은 라이프 사이클 메소드이다.

shouldComponentUpdate(nextProps, nextState, nextContext) => {
    if(this.state.myValue !== nextState.myValue){
        return true;
    }
    return false;
}

 

React.PureComponent

위와 같이 shouldComponentUpdate 에서 값들을 일일히 비교해서 렌더링을 할지 말지 결정하는 동작을 넣어주는게 귀찮다면 순수 컴포넌트는 괜찮은 대안이다. 일반적인 리액트 컴포넌트가 state 의 참조 값을 보고 렌더링을 결정하는 반면, 순수 컴포넌트는 state 바로 아래 레벨의 프로퍼티들의 값을 보고 변경이 됬을 때만 렌더링을 할지 말지 결정한다.

 

React.memo

Hooks 에서는 상속구조를 가질 수 없기 때문에 PureComponent 를 쓸 수 없다. 이때 쓸 수 있는게 React.memo 다. 메모이제이션의 줄임말이며 마찬가지로 props랑 state 가 바뀌었을 때만 렌더링을 해준다.

const MyComponent = memo(props) => {
    return ( 
        ...
    )
}

 

React.createRef

class 에서 ref 를 참조하려면 아래와 같이 일일히 해줘야하는데 

myInputRef;

...

<input ref = {(e) => { this.myInputRef = e; }} />

Hooks 에서는 useRef 로 간단히 해줄 수 있다. class 기반의 컴포넌트에서도 useRef 처럼 간단히 사용할 수 있는 뭔가가 필요해서 나온 함수. 아래와 같이 사용할 수 있다.

myInputRef = React.createRef();

...

<input ref = {this.myInputRef} />

단 useRef 와 마찬가지로 myInputRef 를 참조할 때는 this.myInputRef.current 와 같이 current 가 하나 더 들어간다.

 

무한 루프

render 안에서는 setState 를 쓰면 안된다.

 

태그 없음

아래 3개의 값은 jsx 에서 태그 없음을 의미한다.

false

undefined

null 

 

setTimeout

myTimeout = setTimeout(() => {
   // callback 동작 
}, 1500);

특정 시간 이후 callback 이 동작하게 할 수 있다. 비동기 동작이다.

 

clearTimeout

위 코드에서 어딘가에 clearTimeout(myTimeout) 코드를 입력하면 1.5초 후 동작해야하는 callback 요청을 취소 할 수 있다. setTimeout 으로 넘어간 callstack을 clearTimeout 으로 지워줄 수 있다..

 

useState 와 useRef 의 차이

값이 바뀔 때 렌더링을 하고 싶다면 useState

값이 바뀔 때 렌더링을 원하지 않는다면 useRef

Hooks 에서 state 가 useState 이고

Hooks 에서 멤버 변수가 useRef 정도인 듯 싶다.

ref 는 무조건 current 로 접근해야한다.

 

배열에 JSX 를 담아서 return 하는 것도 유효한 문법이다.

단 반환한 배열안의 원소는 key 를 가지고 있어야한다.

잘 안쓰인다.