BEB Section 1 - React 2

 이건 크게 props와 state로 나눠서 설명하는 게 가장 좋을 것 같다. 

 

 props

1. 컴포넌트의 속성을 의미한다. 외부로부터 전달받은 값으로, 해당되는 컴포넌트가 가진 속성에 해당한다.
2. props는 부모 컴포넌트로부터 전달받은 값이다. 함수 argument처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지 React 엘리먼트로 반환한다. 따라서 최초 렌더링 시 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용 가능하다.
3.  props는 객체 형태이기 때문에 어떤 타입의 값을 넣어 전달 가능하다.
4.  props는 읽기 전용이기 때문에 성별이나 이름처럼 외부로부터 전달받아 값이 전혀 변하지 않는다.

 

 만약 props가 읽기 전용 객체가 아니라면 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 개발자가 전혀 의도하지 못한 부작용이 생기게 되고, React에 대한 one-way data flow down the component hierarchy에 위배된다.

 

• props를 사용하는 방법

1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의
2. props를 이용해 정의된 값과 속성 전달
3. props 렌더링

 

function Parent(){
  return (
    <div className="parent">
      <h1>I'm the parent.</h1>
      <Child />
    </div>
  );
};


function Child() {
  return (
    <div className="child"></div>
  );
};

 

이런 식으로 컴포넌트 선언했고, Child에 대한 속성값을 주어야한다.

 

<Child attribute={value} />
// 그래서 할당할 때
<Child text={"I'm a child."} />

 

 attribute에는 어떤 속성을 줄 것인지, value에는 해당되는 값을 할당한다. 이렇게 되면 Child 컴포넌트에 text를 부여했다는 걸 알 수 있다. 그렇게 이제 props를 사용하게 되면

 

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

 

 소괄호 안에 props를 넣어주고 그 밑에는 <p> 엘리먼트로 {props.text} 를 렌더링한다. 그렇게 되면 출력할 때 결과값이 아래 코드블럭과 같이 나오게 된다.

 

I'm the parent.
I'm the child.

 

state

아까 props는 값이 변하지 않는다고 했는데, state는 컴포넌트 내 값이 변할 수 있다. 

 

useState

React에서 state를 다룰 수 있는 함수 중 하나이다. 얘 같은 경우는

 

import { useState } from "react";

 

 useState 를 import 하게 되면, 일단 컴포넌트의 값들을 내가 정하고 싶은 대로 지정할 수 있다. 처음에 useState에 대한 변수 지정을 어떻게 할지 몰랐는데 다시 보니까 제대로 된 변수만 지정해주면 사용하는 데엔 쉬웠다.

 

let [before, after] = useState(["React", "Python", "Javascript"]);

 

 사용하기 위해 변수 2개 설정해준다. 이해하기 쉽게 변수를 쉬운 영단어로 표기했다. before를 통해 계속해서 그 변수를 사용하고 after를 사용하려면 함수를 따로 선언해 사용할 수 있도록 해준다. 자세한 건 React 1에 있는 Github 주소를 보면 알 수 있다.

 

 

이벤트 처리

 HTML에서 이벤트 처리할 때와 React에서 이벤트 처리할 때와 다른 것은 이벤트 문법들은 {}, 여기 이 중괄호에 넣는다는 점이었다.

 

<button onClick={handleEvent}>Event Click</button>