제로초 리액트 강의 3.2

코드가 너무 길어지면 컴포넌트로 빼주는게 좋다

 

컴포넌트로 분리하는 이유

> 재사용성을 위해서

> 가독성을 위해서

---

기존 코드에서

render() {
        return (
            <>
            <h1>{this.state.result}</h1>
            <form onSubmit={this.onSubmitForm}>
                <input maxLength={4} value={this.state.value} onChange={this.onChangeInput}/>
                <button>입력!</button>
                <div>시도: {this.state.trys.length}</div>
                <ul>
                {this.fruits.map( (v, i) => {
                    return (<Try />)
                })}
                </ul>
            </form>
            </>
        );
    }

*  따로 뺀 컴포넌트 임포트 잊지 말기

 

컴포넌트로 분리

// Try.jsx
import React, { Component } from 'react';

class Try extends Component {
    render() {
        return (
           <li>
           <b>{v.fruit}</b> - {i}
           </li>
        )
    }
}

export default Try;

* 임포트와 익스포트 디폴트 잊지말기

 

---

근데 위와 같은 상황에서 Try가 볼때는 v가 뭔데...? fruit랑 taste가 뭔데..? 가 됨

그래서 기존 코드에서 값을 Try에게 전달해줘야함 > 그래서 props로 전달해주는 것임!

 

render() {
        return (
            <>
            <h1>{this.state.result}</h1>
            <form onSubmit={this.onSubmitForm}>
                <input maxLength={4} value={this.state.value} onChange={this.onChangeInput}/>
                <button>입력!</button>
                <div>시도: {this.state.trys.length}</div>
                <ul>
                {this.fruits.map( (v, i) => {
                    return (<Try key={v.fruit+v.tatste} value={v} index={i} />)
                })}
                </ul>
            </form>
            </>
        );
    }

v와 i 값을 props로 이어주기

에러가 나니 key값도 추가!

 

import React, { Component } from 'react';

class Try extends Component {
    render() {
        return (
           <li>
              <b>{this.props.value.fruit}</b> - {this.props.index}
           </li>
        )
    }
}

export default Try;

props로 값을 고쳐서 받기

---

props가 있다는 것은 부모 컴포넌트가 있다는 뜻

 

리액트의 복잡한 문제는 props에서 시작!

이제 컴포넌트의 컴포넌트의 컴포넌트가 생길 때 문제가 생김

> 할아버지 컴포넌트가 손자 컴포넌트에게 값을 넘겨주고 싶을 때

부모 컴포넌트도 그 값을 조상 컴포넌트에서 받아왔을 때 등등

 

>이럴 때 리덕스, 컨텍스트, 모벡스가 이럴 때 씀! 그래서 사용을 추천

---

JSX의 주석

{/* 주석 */}

---

화살표함수를 사용하지 않으면 this를 쓸 수 없음 > undefined 나옴

constructor를 사용해서

그 안에 bind 함수를 써서 this를 이어줘야함!

 

이렇게 쓸거를

class NumberBaseball extends Component {
        state = {
            value: '',
            result: '',
            answer: getNumbers(),
            tries: [],
        };

    onSubmitForm = (e) => {
        e.preventDefault();
    };

    onChangeInput = (e) => {
        e.preventDefault();
    };
    ...

이렇게 써줘야함

class NumberBaseball extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            result: '',
            answer: getNumbers(),
            tries: [],
        };
        this.onSubmitForm = this.onSubmitForm.bind(this);
        this.onChangeInput = this.onChangeInput.bind(this);
    }

onSubmitForm(e) {
    e.preventDefault();
};

onChangeInput(e) {
    e.preventDefault();
};
...