리액트 핵기초

리액트 컴포넌트 import 기초 부분이 헷갈려서 다시 복습했다.

Pizza 컴포넌트 만들어보기

//Pizza.js임

import React from 'react';
function Pizza(){
  //컴포넌트의 이름은 대문자로 시작해야한다.
	return <h3> 피자 맛있어 </h3>
  //아직 자바스크립트 함수를 조합하지 않았을 뿐 JSX를 반환하고 있다
}

export default Pizza;
//다른 파일에서 Pizza컴포넌트를 사용할 수 있다!

Pizza 컴포넌트 사용하기

//App.js임 , Pizza.js가 있는 경우 

import React from "react";
import Pizza from './Pizza'; //import하기

function App() {
  return ( 
    ~~~~
    <Pizza /> //app컴포넌트가 반환할 값에 추가하기
  )};

//App.js임, Pizza.js가 없는 경우

import React from "react";
function Pizza() {
return <h3>피자맛있어</h3>
}

function App() {
  return ( 
    ~~~~
    <Pizza /> //app컴포넌트가 반환할 값에 추가하기
  )};

🦖app.js에 컴포넌트를 추가하는 이유
리액트는 최종적으로 단 한개의 컴포넌트를 그려야 하는데
app.js에 컴포넌트를 추가하면 두 개의 컴포넌트를 그리려 하는 상황이라 오류가 발생한다. 그래서 App 컴포넌트 안에 만든 컴포넌트를 넣어준다!