React 기본 학습 -7. 배열과 구조분해

2020-11-18 18:18

리액트 강좌를 보면서 학습한 내용 정리용.

리액트 무료 강좌(웹게임) - ZeroCho TV

1. 배열에 요소 추가할 경우에 주의할 점

1) React는 array.push(1) 과 같이 push를 사용하지 않는다.

이유

React 가 render() 에서 렌더링 해 주는 기준은 참조가 바뀌어야 함.
즉 예전 state 와 현재 state 가 달라야 함.

const arr = [];
arr.push(1);

위와 같이 기존 array에 push 로 1을 추가하면 참조가 변하지 않기 때문에 React 입장에선 변한게 없다고 판단하여 화면상에 변화가 발생하지 않음(render()에서 새로 그려주지 않는다는 뜻).

2) 배열에 요소를 추가할때는 새로운 배열을 선언해서 기존 배열을 복사해서 넣어 주고 값을 추가한다.

const arr1 = [];
const arr2 = [...arr1, 1]; // "...arr1" 부분이 기존배열 arr1을 복사한다는 의미

배열에 값을 추가할때는 React에서 변화를 인식할 수 있도록 참조를 바꿔줄 필요가 있다.

2. Class 를 이용할때 this.state.xxx 를 일일이 치기 귀찮을때..

구조분해로 코드를 단축시키는 방법이 있음.
바 구조화 할당으로 간단하게 만드는 법.
const { result, value, tries } = this.state; 와 같이 구조분해를 선언하는 방식은 Class 바로 밑에서는 사용불가. 반드시 함수 안에서만 선언 & 적용 가능.

수정 전

class NumberBaseball extends Component {
    state = {
        result: '',
        value : '',
        answer: getNumbers(), // [1, 3, 5, 7]
        tries: [], // 시도한 횟수. push 쓰면 안됨.
    }
    
~~ 코드 생략 ~~
    render(){
        return(
            <>
                <h1>{this.state.result}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <input maxLength={4} value={this.state.value} onChange={this.onChangeInput}/>
                </form>
                <div>시도: {this.state.tries.length}</div>
                <ul>
                    {this.state.tries.map((v, i) => {
                        return (
                            <Try key={`${i + 1}차 시도 : `} tryInfo={v} />
                        );
                    })}
                </ul>
            </>
        );
    }
}

수정 후

class NumberBaseball extends Component {
    state = {
        result: '',
        value : '',
        answer: getNumbers(), // [1, 3, 5, 7]
        tries: [], // 시도한 횟수. push 쓰면 안됨.
    }
    
~~ 코드 생략 ~~
    render(){
        const { result, value, tries } = this.state;
        return(
            <>
                <h1>{result}</h1>
                <form onSubmit={this.onSubmitForm}>
                    <input maxLength={4} value={value} onChange={this.onChangeInput}/>
                </form>
                <div>시도: {tries.length}</div>
                <ul>
                    {tries.map((v, i) => {
                        return (
                            <Try key={`${i + 1}차 시도 : `} tryInfo={v} />
                        );
                    })}
                </ul>
            </>
        );
    }
}

Pie's Tech Note

생계형 개발자의 메모장