[React] 기초개념 정리하기

1) 컴포넌트

리액트는 컴포넌트가 반환하는 값을 화면에 그려준다
컴포넌트의 생김새는 마치 HTML 태그와 비슷하다. 밑에 예시로 확인해보자

import React from 'react'

function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default App;

App이라 작성하면 안되고 < App /> 같은 태그로 작성해줘야 컴포넌트로 인식을 한다

2) JSX

컴포넌트를 만들 때에는 JSX문법을 사용하는데 JSX는 HTML과 자바스크립트를 조합한 것이다
컴포넌트를 작성할 때 시작하는 단어는 무조건 대문자 이어야 한다

// ./src/Potato.js

import React from 'react';  

function Potato() {
  return <h3>I Love Potato</h3>;
}

export default Potato;

그럼 앞에서 살펴보았던 컴포넌트에 적용을 시켜보자

import React from 'react'
import Potato from './Potato';

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Potato />
    </div>
  );
}

export default App;

3) props

컴포넌트에서 컴포넌트로 전달하는 데이터를 의미함
이전에 Potato를 출력하는 것이 아니라 20번 이상 다른 내용을 출력을 해야하는 상황이면 하나하나씩 선언하기에 너무 비효율적이다
그래서 props를 이용하는 것이 효율적

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

return App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="Kimchi" />
      <Food fav="Ramen" />
      <Food fav="Chukumi" />
   </div>
  );
 }

props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호({})로 값을 감싸야 한다

4) map 함수

위에서와 같이 하나하나 태그를 설정하는 것 역시 너무 비효율적이다
이러한 경우를 대비하여 하나의 배열을 설정하고 거기에서 필요한 값을 필요할 때마다 가져다 쓰는 것이 효율적이다 => 이러한 경우 map함수를 사용한다

function Food({ name }) {
 return <h1> I Like { name } </h1>;
}

const foodILike = [
 {
 	name: 'Kimchi'
 },
 {
 	name: 'Bibimbap'
 },
 {
 	name: 'Kimbap'
 }
]

return App() {
 return (
   <div>
  	 {foodILike.map((dish) => (<Food name={dish.name} />)}
  </div>
 );
}

• map함수는 배열의 모든 원소마다 특정 작업을 하는 함수를 적용하고, 함수가 반환한 결과를 모아서 배열로 반환해준다
• key props를 사용하면 컴포넌트가 서로 다르다는 것을 알려줄 수 있다
• key props는 리액트 내부에서 사용되는 특수 props라 Food컴포넌트에 직접 전달되지는 않음
  

 const foodILike = [
  {
  	id: 1,
    name: 'Kimchi'
  },
  {
  	id: 2,
    name: 'Bibimbap'
  },
  {
  	id:3,
    name: 'Kimbap'
  }
]

 return App() {
 return (
   <div>
  	 {foodILike.map((dish) => (<Food key={dish.id} name={dish.name} />)}
  </div>
 );
}