Props

---

Component란 , UI를 구성하는 재사용이 가능한 독립적인 모듈을 말한다.

Props란 , 컴포넌트끼리의 정보 교환 방식으로 , 데이터를 부모 Component -> 자식 Component 로 보내는 방법을 말한다. 여러 요소를 담은 하나의 객체 형태로 구성되어 있다.

🧸 함수형 컴포넌트

function WelcomeFunc(props){
  return <div>Hello, {props.name}</div>
}

✔️ javascript 함수 형식으로 작성한 Component.

🧸 클래스형 컴포넌트

class WelcomeClass extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

✔️ ES6 Class 를 사용하여 정의한 Component.

📌 Caution.
Component 이름은 PascalCase , 폴더 이름은 camelCase 사용.

🧸 Component 보는 방법

// import : 내가 필요한 파일을 가져오는 영역
import React from "react"

function Ex() {
  // 자바스크립트 문법을 쓸 수 있는 영역
  return 
  <div>{/* JSX 를 쓸 수 있는 영역 */}</div>;
}

// 내가 만든 컴포넌트를 밖으로 내보내는 영역
export default Ex;

🧸 Props

function App() {
  return <Father />;
} // 내 이름은 류선재입니다.

function Father() {
  const lastName = "류";
  return <Child lastName={lastName} />;
}

function Child(props) {
  const name = "선재";
  return (
    <div>
      <p>{`내 이름은 ${props.lastName}${name}입니다.`}</p>
    </div> 
  );
}

✔️ 부모 Component -> 자식 Component : 단방향
✔️ 반드시 읽기전용으로 취급하며 변경 X.

📌 Caution.
인수로 받은 props 는 하나의 객체 형태로 전달되며, props 자리의 여러 변수가 주어질 경우 에러를 반환.

🧸 Props : 구조분해할당

const App = () => {
  const title = "[선재 업고 튀어]";
  const character = { name: "류선재", age: 18, job: "수영선수" };

  return (
    <div>
      <Introduction title={title} character={character} />
    </div> 
  );// [선재 업고 튀어]
};  // 내 이름은 류선재이고, 18살이야.

const Introduction = ({ title = "드라마", character }) => {
  const { name, age, job } = character;
  return (
    <div>
      <h3>{title}</h3>
      {`내 이름은 ${name}이고, ${age}살이야.`}
    </div>
  );
};

✔️ props 객체에 값이 없을 경우, 출력할 초기값도 세팅 가능.
✔️ 객체 구조분해할당을 이용하여 props 속성을 바로 변수에 할당 가능.

🧸 Props : 함수

const App = () => {
  const title = "[Todo List]";
	const isDone = () => {
      console.log("Done!")
    }
  return (
    <div>
      <Todo title={title} isDone={isDone} />
    </div>
  );
};

const Todo = ({ title, isDone }) => {
  return (
    <div>
      <h3>{title}</h3>
        React 공부하기
        <button onClick={isDone} >Click</button>
    </div>
  );
};

✔️ props로 함수를 전달하여 자식 Component에서 사용 가능.

📌 Caution.
functionName() 형태로 전달할 경우, 함수 선언부가 아닌 함수 실행한 결과를 전달하게 된다.