컴포넌트는 다른 컴포넌트를 렌더링 할 수 있다
그리고 컴포넌트는 다른 컴포넌트에게 정보를 전달할 수 있다 ➡️ props

props

모든 컴포넌트는 props라고 하는, 컴포넌트에 대한 정보를 담은 객체를 가지고 있다.

💡 컴포넌트의 props를 보고싶다면 this.props를 콘솔 찍어보면 된다.

컴포넌트에게 props 주기

1.

컴포넌트에게 attribute 형식으로 props에 있는 정보를 부여할 수 있음

<Example message="This is some top secret info." />

➡️ Example 컴포넌트에게 message라고 지정한 정보를 주었다

2.

만약 주고싶은 정보가 string 형이 아니라면 {}로 감싼다

<Greeting myInfo={["top", "secret", "lol"]} />

Array 형을 {}로 묶어서 넘길 수 있다

3.

여러개의 정보를 줄 수도 있다

<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />

➡️ 여기서도 string이 아닌 모든 정보들은 {}로 감싸져있다

컴포넌트에서 props를 받아 렌더하기

컴포넌트의 render() 메소드에 this.props.이름 형식으로 추가하기

class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}</h1>;
  }
}

props = 받은 정보를 담고있는 객체
this.props = 그 객체를 지칭
prop = 받은 정보 1개
props = 받은 정보 2개 이상

받은 props를 로직에 사용하기

props 정보를 그냥 정보 렌더링에만 사용하지 않아도 됨. 이를 가지고 로직을 만들 수도 있음.

export class Welcome extends React.Component {
  render() {
    if (this.props.name === 'Wolfgang Amadeus Mozart') {
      return (
      	<h2>
      	  hello sir it is truly great to meet you here on the web
      	</h2>
      );
    } else {
      return (
      	<h2>
      	  WELCOME "2" MY WEB SITE BABYYY!!!!!
      	</h2>
      );
    }
  }
}

props로 받은 name을 가지고 조건문 로직에 사용하는 예시

export class Greeting extends React.Component {
  render() {
  	if (this.props.signedIn === false) {
  	  return <h1>GO AWAY</h1>;
  	} else {
  	  return <h1>Hi there, {this.props.name}!</h1>;
  	}
  }
}

비슷한 다른 예시

---

Event Handler

Event Handler 선언하기

컴포넌트에 Event Handler 함수를 만드는 방법
render()와 같은 형태로 같은 계층에 함수를 작성한다.

class Example extends React.Component {
  handleEvent() {
    alert("Hi")
  }
  
  render() {
    return (
      <h1 onClick={this.handleEvent}>
        Hello World
      </h1>
    );
  }
};

💡 이벤트 핸들러 함수는 컴포넌트 밖이 아닌 안에 선언하는 것이 리액트의 방식

Event Handler를 prop으로 전달하기

class Talker extends React.Component {
  talk() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }
  
  render() {
    return <Button talk={this.talk} />;
  }
}

일반 props 넘길때와 똑같은 문법으로 하면 된다
⛔️ 아예 <Button /> 컴포넌트에 onClick={this.talk}를 주는 것이 아님 주의!

전달받은 Event Handler 사용하기

위에서 전달받은 talk 함수를 적용하려면, 적용하고 싶은 요소에 event listener의 값인 event handler로 주면 된다.

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.talk}>
        Click me!
      </button>
    );
  }
}

Event Naming Convention

함수명 (Event Handler)

1. 어떤 이벤트 리스너에 적용될 것인지 파악
2. handle+이벤트로 명명

ex) click 이벤트를 위한 함수 ➡️ handleClick

prop명 (하위 컴포넌트로 넘기는)

1. 항상 on으로 시작
2. 뒤는 일어날 이벤트

ex) click 이벤트를 위한 prop ➡️ onClick

class MyClass extends React.Component {
  handleHover() {
    alert('I am an event handler.');
    alert('I will listen for a "hover" event.');
  }
 
  render() {
    return <Child onHover={this.handleHover} />;
  }
}

✨ on이벤트명 식의 단어가 이벤트 리스너로 작동하는 것은 HTML요소에 있을 때만!
😇 그렇기 때문에 컴포넌트 인스턴스에 쓰면 그냥 prop 명이 된다.

---

this.props.children

해당 컴포넌트 인스턴스의 하위 요소들을 전부 다 가져옴

class App extends React.Component {
  render() {
    return (
      <div>
        <List type='Living Musician'>
          <li>Sachiko M</li>
          <li>Harvey Sid Fisher</li>
        </List>
        <List type='Living Cat Musician'>
          <li>Nora the Piano Cat</li>
        </List>
      </div>
    );
  }
}

List 인스턴스에 하위요소들 있음

export class List extends React.Component {
  render() {
    let titleText = `Favorite ${this.props.type}`;
    if (this.props.children instanceof Array) {
    	titleText += 's';
    }
    return (
      <div>
        <h1>{titleText}</h1>
        <ul>{this.props.children}</ul>
      </div>
    );
  }
}

this.props.children을 이용하여 그 하위요소들을 넣도록 할 수 있음

defaultProps

아무 prop 값이 안들어왔을 때를 대비하여 디폴트 props 객체를 미리 선언해둘 수 있음

class Button extends React.Component {
  render() {
    return (
      <button>
        {this.props.text}
      </button>
    );
  }
}

Button.defaultProps = { text: "I am a button" }

이렇게 만들면 button 요소가 아무 text도 못받더라도 기본 세팅값이 I am a button으로 들어가게 된다