리액트 31~35강 정리

PureComponent

shouldComponentUpdate를 자동으로 구현해놓은 컴포넌트

state들이 바뀌었는지 보고 판단을 해서 렌더링

 

단점 : 객체나 배열 같은 복잡한 구조가 생기면 pureComponent도 변화감지가 어렵다.

 

결론 push대신에 스프레드 연산자를 쓴다! (pure컴포넌트가 알아차리게 하기 위해서)

 

배열 내부에 객체 넣는 것들 안 쓰는것이 좋다. ( 배열안에 객체 안에 배열 등등)

 -> 자료 구조를 간단하게 하는 것이 좋다.

 

컴포넌트가 복잡해지면, pureComponent가 안되는 경우도 있음.(hooks를 사용하지 않을때)

 

원하는 것만 랜더링을 다시해주기 위해 shouldComponentUpdate 한다.

 

hooks를 사용할때는 memo를 사용한다.

  memo : props나 state가 변경되었을때 렌더링 해준다.

 

class에서는 inputRef 를 사용.

 

hooks에서는 input.current.해서 사용

 

render안에는 절대 setState를 사용하지 않는다!

 

props는 부모에게 물려받은 것이기 때문에 자식에서 바꿔주면 부모에게 영향이 갈 수 있다.

그래서 props를 직접 변경하지 말고, propst를 state로 만든 후에 state를 바꾼다.

 

** constructor와 super(props)는 짝이다.

 

함수화를 하는 경우 정밀한 동작을 하기 위해서 이다. 

예를들어 어떤 필터링이 되서 값이 할당되어야 하는 경우.

constructor(props) {
        super(props);
        
        const filtered = this.props.filter(() => {

        });

        this.state = {
            result: filtered,
            try: this.props.try,
        }
    }

이런식으로 consturctor를 사용해 props를 가져오고 state에 할당해준다.

 

 

A -> B -> C -> D -> E -> F -> G

 

A에서 G로 props 를 전달 할 수 있는 방법이 컨텍스트 ( 중간에 렌더링 하지 않게 하기 위해서) 

 

컨텍스트를 조금 더 발전 시킨게 리덕스

 

react에서는 조건문을 사용할때 삼항연산자를 사용한다.

 

import React, { Component } from 'react';

class ResponseCheck extends Component {
    state = {
        state: 'waiting',
        message: '클릭해서 시작하세요.',
        result: [],
    };

    timeout;
    startTime;
    endTime;

    onClickScreen = () => {
        const { state, message, result } = this.state;
        if (state === 'waiting') {
            this.setState({
                state: 'ready',
                message: '초록색이 되면 클릭하세요.',
            });
            this.timeout = setTimeout( () => {
                this.setState({
                    state: 'now',
                    message: '지금 클릭',
                });
                this.startTime = new Date();  // 랜더링이 일어나지 않게 해야함!
            }, Math.floor(Math.random() * 1000) + 2000); // 2초~3초 랜덤
        } else if (state === 'ready') { // 성급하게 클릭
            clearTimeout(this.timeout);
            this.setState({
                state: 'waiting',
                message: '너무 성급하시군요! 초록색이 된 후에 클릭하세요!'
            })
        } else if (state === 'now' ) {  // 반응속도 체크
            this.endTime = new Date();
            this.setState((prevState) => {
                return {
                    state: 'waiting',
                    message: '클릭해서 시작하세요!',
                    result: [...prevState.result, this.endTime - this.startTime],
                };
            });
        }
    };

    renderAverage = () => {
        const {result} = this.state;
        return result.length === 0
            ? null
            : <div>평균 시간: {result.reduce((a, c) => a + c) / result.length}ms</div>
    };

    render() {
        return (
            <>
                <div id="screen"
                className={this.state.state}
                onClick={this.onClickScreen}
                >
                    {this.state.message}
                </div>
                {this.renderAverage()}
            </>
        )
    }
}

export default ResponseCheck;