[react] 함수형 react 기본 (노마드코더)

• react는 하나의 컴포넌트만을 렌더링한다.

• food 컴포넌트에 fav라는 이름의 property를 kimchi라는 value로 준것

• 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때에는 props로 전달

함수형과 class의 차이점

• class는 component로부터 확장하고 return을 가지고 있지 않기 때문에 render 메서드안에서 return을 사용한다.

• react는 자동적으로 class 컴포넌트의 render 메서드를 실행한다. 자동으로!

• class는 render 메서드만 다시 실행하지만 함수는 함수전체를 다시 렌더링한다.

때문에 return문에서 함수를 넣으면 렌더링 될 때 마다 함수를 다시 생성하기 때문에 따로 빼주는 것이 좋다. (예) onChange함수를 return문에 안에 위치 시키기 보단 따로 분리하자!

function App() {
  return (
    <div>
      <Food 
       fav="kimchi"
       something={true}
       lala={[1,2,3,4]}
        />
    <Food fav="ramen"/>
    </div>
  );
}

function Food(props) {
  console.log(props)
  return (
  <h1>i like </h1>
  );
}

Food의 인자로 object가 들어오는데 Food에게 전달한 props가 아래처럼 넘어온다.
{fav: "kimchi", something: true, lala: Array(4)}
{fav: "ramen"}

const foodLike = [
  {
    name:'김치'
  },
  {
    name:'라면'
  },
  {
    name:'삼겹살'
  },
]


function App() {
  return (
    <div>
      {foodLike.map((list, index) => <Food key={index} fav={list.name}/>)}
    </div>
  );
}


function Food({fav}) {
  return (
  <h1>I like {fav}</h1>
  );
}

첫번째 코드처럼 수동으로 하지 않고 아래처럼 map으로 동적으로 list추가를 할 수 있다. (map은 새로운 배열을 retrun하니 div아래 배열이 존재하는 것)

function FoodRender(list, index){
  return <Food key={index} fav={list.name}/>
}

function App() {
  return (
    <div>
      {foodLike.map(FoodRender)}
    </div>
  );
}


function Food({fav}) {
  return (
  <h1>I like {fav}</h1>
  );
}

위처럼 함수를 따로 분리도 가능 (FoodRender함수에 인자를 따로 전달하지 않아도 사용이 가능하다는 것을 알았다.)

참고: 노마드코더