props 제대로 이해하기

부모 요소 Parent

자식 요소 Chlid

---

import React from "react";
import Child from "./Child";

const Parent = () => {
  const sayHello = () => {
    alert("안뇽~")
  }
  // <input type="text"/> 이렇게 주는 것 처럼 똑같이 key:value형태로!
  // string이외의 형태는 자바스크립트 형태로 보내줄 수 있어 html에서는 안되니까
  return (
  <>
    <Child name="정니" age={3} isMale={true} sayHello={sayHello}/>
    
    <Child name="정은" age={26} isMale={false} />
  </>
  );
};

export default Parent;

• Props 자식요소에게 전달하기

- <input type="text" /> 이렇게 주는 것 처럼 똑같이 key:value형태로 전달해야한다.

- html에서는 string만 되고 나머지는 안되니까 string이외의 형태는 {}안에 넣어 자바스크립트 형태로 보내줄 수 있다.

 

import React from "react";

const Child = (props) => {
    // console.log(props) //{name: '정은', age: 3, isMale: true, sayHello: ƒ} 이런식으로 전달됨 
    // 방법 3개 중 하나를 경우에 따라서 고르면 됨. 
    //1. 이런 식으로 하면 props 안붙혀도 됨 근데 이렇게 하면 props많아 졌을 때 끝도 없음
    // const sayHello = props.sayHello;
    // const name = props.name;
    // const age = props.age;
    // const isMale = props.isMale;
    //2.  구조분해할당, 비구조화할당 const a = {} 이렇게 하던거를 거꾸로 쓰면됨 - 많이쓰니 꼭 기억!
    const { sayHello, name, age, isMale } = props
    //3. 아예 인자로 주는 방법도 있음 - props 자리에 아예 분해해버리는 거야!
    // Child = ({sayHello, name, age, isMale})
  return (  
  <p onClick={sayHello}>
  제 이름은 {name}이고 {age}살이며 {isMale ? '남자' : '여자'}입니다.
  </p>
  );
};

export default Child;

비구조화할당 하는 방법

방법 1. 이런 식으로 하면 props 안붙혀도 됨 근데 이렇게 하면 props많아 졌을 때 끝도 없음

const sayHello = props.sayHello;
const name = props.name;
const age = props.age;
const isMale = props.isMale;

방법 2. const a = {} 이렇게 하던거를 거꾸로 쓰면됨 - 많이쓰니 꼭 기억!

const { sayHello, name, age, isMale } = props

방법 3. 아예 인자로 주는 방법도 있음 - props 자리에 아예 분해해버리는 거야!

const Child = ({sayHello, name, age, isMale}) => {

 생략

}

---

toggle 이해하기

// Parent.js

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [isToggled, setIsToggled] = useState(true);

  const changeColor = () => {
    // if(isToggled === true) {
    //   setIsToggled(false)
    // } else {
    //   setIsToggled(true)
    // }
    // setIsToggled(isToggled ? false : true) 트루면 펄스 펄스면 트루
    setIsToggled(!isToggled)
  }

  return (
  <>
    <Child isToggled={isToggled} changeColor={changeColor}/>
  </>
  );
};
export default Parent;

// Child.js

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [isToggled, setIsToggled] = useState(true);

  const changeColor = () => {
    // if(isToggled === true) {
    //   setIsToggled(false)
    // } else {
    //   setIsToggled(true)
    // }
    // setIsToggled(isToggled ? false : true) 트루면 펄스 펄스면 트루
    setIsToggled(!isToggled)
  }

  return (
  <>
    <Child isToggled={isToggled} changeColor={changeColor}/>
  </>
  );
};
export default Parent;