ctrl+c
문제발생
사용 : 중복 코드 작성
shotgun surgery(산탄총 수술)
👉중복 코드를 작성해야 할 때,
중복되는 코드가 너무 많아지고, 코드가 길어진다.
👉 리액트 -> 컴포넌트화 방식
컴포넌트를 제작해서 불러다 쓸 수 있다.
유지보수가 좋다.
👉 react
는 component 기반의 UI 라이브러리
명령형 프로그래밍
:절차를 하나하나 다 나열
선언형 프로그래밍
:리액트는 선언형 프로그래밍이다.
목적을 바로 말해 코드를 짧게 쓸 수 있다.
virtual DOM (Document Object Model)
리액트는 가상의 돔을 사용
가상의 돔에 미리 업데이트를 하고, 나중에 한번에 보여준다
필요없는 파일들이나 코드는 삭제하고, 새로 폴더를 구성해서 기본환경값을 설정해놓는다.
컴포넌트 파일과 컴포넌트의 이름을 동일하게 하는 것이 좋다.
const Yeonju = () => {
return (
<>
<div>연주입니다.</div>
</>
);
};
export default Yeonju;
컴포넌트는 항상 대문자로 시작, export해서 다른 곳에 쓸 수 있게 해준다.
import './App.css';
import Yeonju from '../Components/Yeonju.js';
function App() {
return (
<Yeonju></Yeonju>
);
}
export default App;
import를 해준 후, 컴포넌트를 사용하고 싶은 곳에
<컴포넌트이름></컴포넌트이름>
으로 작성
✏️ props : properties의 줄임말
어떠한 값을 컴포넌트에게 전달해줘야할 때, props를 사용
import './App.css';
import Yeonju from '../Components/Yeonju.js';
function App() {
const hello = '곡식이네';
return <Yeonju hello={hello}></Yeonju>;
}
export default App;
react에서 변수는 중괄호{}
안에 넣어줘야한다.
const Homil = () => {
return (
<>
<ul>
<li>호밀</li>
<li>현미</li>
<li>율무</li>
</ul>
</>
);
};
export default Homil;
import Homil from './Homil';
const Yeonju = ({ hello }) => {
return (
<>
<h1>{hello}</h1>
<Homil></Homil>
</>
);
};
export default Yeonju;
컴포넌트에 데이터를 전달해주어야 할 때, props를 통해 전달한다.
컴포넌트안에 위치한 컴포넌트에 데이터를 전달할때,
여러 컴포넌트를 통해 props를 전달해야해서 불편하다.
그래서 전역에서 쓸 수있는 context를 이용한다.
creatContext()
선언import { createContext } from "react";
const data = createContext();
변수이름.provider
로 감싸기 return (
<data.Provider>
<Yeonju hello={hello}></Yeonju>
</data.Provider>
);
<변수의이름.provider value={전송할 데이터}><component></component></변수의이름.provider>
로 데이터 넘겨주기function App() {
const hello = '곡식이네';
const bye = '소개였습니당';
return (
<data.Provider value={bye}>
<Yeonju hello={hello}></Yeonju>
</data.Provider>
);
}
전송할 데이터가 2개 이상이라면 value={{데이터1,데이터2}}
객체로 내보낸다.
1번에서 만든 데이터의 대장을 (export) 모듈로 내보낸다.
export { App, data };
import { useContext } from 'react';
import { data } from '../App/App.js';
const bye = useContext(data);
8.원하는 위치에 변수 호출
const Homil = () => {
const bye = useContext(data);
// console.log(bye);
return (
<>
<ul>
<li>호밀</li>
<li>현미</li>
<li>율무</li>
</ul>
<h2>{bye}</h2>
</>
);
};