React 기본 학습 -6. 컴포넌트 분리와 props

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

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

1. 컴포넌트 분리와 props

props

• HTML의 attribute와 같은 요소를 React 에서는 props 라고 한다.
• 부모 컴포넌트는 자식 컴포넌트에게 props를 상속한다.

아래 예제에서 value, index가 props에 해당한다.

<Try value={v} index={i}/>

NumberBaseball.jsx (부모 컴포넌트)

• 반복되는 부분을 try.jsx 로 컴포넌트를 분리하여 사용함.
• map안에 자식컴포넌트 가 들어있다고 해도 무조건 key는 지정해 줘야함.

import React, { Component } from 'react'; // 이렇게 합쳐서 쓸 수 있다.
import Try from './try';

class NumberBaseball extends Component {

    render(){
        return(
            <>
                <ul>
                    {this.fruits.map((v, i) => {
                        return (
                            <Try key={v.fruit + v.color} value={v} index={i}/>
                        );
                    })}
                </ul>
            </>
        );
    }
}

try.jsx (자식 컴포넌트)

• 부모 컴포넌트에서 전달받은 값은 this.props.{props요소이름} 으로 호출한다.

import React, {Component} from 'react';

class Try extends Component {
    render(){
        return(
         <li key={this.props.value.fruit + this.props.value.color}>{this.props.index} : {this.props.value.fruit} - {this.props.value.color}</li>
        )
    }
}

export default Try; // 이렇게 선언해야 다른 파일에서 불러올 수 있음.

• 부모-자식-손자-증손자 이렇게 서로서로 props 주고받다보면 복잡해지기 쉬우므로 redux, context (은행역할) 같은걸 사용함.
• React 자체는 context가 있고 context를 좀더 복잡한 일을 할 수 있도록 만든게 redux. redux도 내부적으론 Context를 사용함.

2. React의 주석

{/* */}

3. 메서드 바인딩

화살표 함수”()=>{}” 를 사용하지 않으면 this 호출을 못함.

1) 화살표 함수 사용

각 함수의 bind(this) 를 자동으로 해 주는 역할.

onSubmitForm = () => {
    // 안에서 this 사용가능
};

2) 화살표 함수 사용안함

onSubmitForm () {
    // 안에서 this 사용불가
};

• 위와 같은 형태일 경우 this.onSubmitForm = this.onSubmitForm.bind(this); 를 기입해 주어야지 this를 사용할 수 있음.
• 예전 React 문법 사용시에는 위와 같이 사용했고, 이걸 사용하기 위해 바인드를 일일이 해줘야했음.
• React 는 초창기부터 지금까지 문법 변화가 있어서 기존 React 코드를 이해하기 위해서는 이런 문법사용이 있다는 것도 알아 두어야 함.

Pie's Tech Note

생계형 개발자의 메모장