[2019.04.15] React의 개념 - props

내가 이해한 대로 적는 개념 설명

 

 

기존의 자바스크립트와는 다르게 react에는 클래스나 함수 하나하나가 컴포넌트로 볼 수 있다.

컴포넌드는 여러 html요소가 구현되어 있는 하나의 html구성(?)

# 함수 방식으로 컴포넌트를 생성하는 방법

const HelloWorld = () => {
  return (
    <div>
    헬로월드
  </div>
  );
};

ReactDOM.render(<HelloWorld />, document.getElementById("root"));

컴포넌트 생성 방법은 두가지가 있다. 위 코드처럼 함수 형태로 생성하는 방법. return 괄호 안의 태그들이 호출되는 곳에 렌더될 부분이다. 이 방법은 따로 state를 가지지않고 짜여진 틀만 가져와서 사용하면 될 때 쓰면 될 듯하다. 

const HelloWorld = () => (
  <div>
    헬로월드
  </div>
);

이렇게  return 키워드를 쓰지않고 사용한는 방법도 있다. 대신 함수 괄호를 위처럼 해주어야 한다. 저렇게 하면 HelloWorld 괄호 전체가 reder될 부분이다.

 

# 클래스 방식으로 컴포넌트를 생성하는 방법

class HelloTO extends React.Component{
  constructor(props){
    super(props);
  }
  render() {
    return(
      <div>Hello</div>
    );
  }
}

위처럼 하면 클래스로 컴포넌트를 생성하는 방식이다. 이제 이렇게 하면 해당 컴포넌트의 state와 함수를 가지게 된다. 그리고 constructor에 꼭 super(props)로 옮겨줘야하고, render()함수를 꼭 가져야한다. (이것도 return 생략 가능)

 

# props

props는 나를 호출한 컴포넌트가 내게 던져준 데이터이다. 우선 데이터를 보내는 방법은 이와 같다.

const HelloWorld = () => (
  <div>
    헬로월드
    <HelloTO todo={'good~'}/>
  </div>
);

'헬로월드' 문자열 밑에 HelloTO로 만들었던 클래스를 컴포넌트로 가져왔다. 그리고 'good~' 문자열을 todo라는 이름으로 props를 던져줬다.

자 그럼 자식에서는 어떻게 props를 받는지 알아보자.

 

# 함수 방식의 컴포넌트가 props를 받는 방법

const Hello2 = (props) => (
  <div>hello2 + {props.todo}</div>
)

이건 받는 자식 컴포넌트. props매개변수에, 부모에서 정해준 이름 todo를 속성으로 해당 값을 가져오게 된다.

 

# 클래스 방식의 컴포넌트가 props를 받는 방법

class Hello2 extends React.Component{
  
  render = () => (
    <div>Hello {this.props.todo}</div>
  )
}

함수 방식의 클래스와 다르게 매개변수로 받는 부분은 없음(사실 constructor에서는 받기는 해야된다.) 대신 this라는 키워드를 써줘야 한다.