TIL - 220917 - study_React

22.09.17 토요일 : 프로젝트 스터디

📝 react 개발환경구축

1. npm init
2. npm install create-react-app --save
3. create-react-app 폴더이름
4. cd 폴더이름
5. npm start
6. 서버 종료 -> ctrl+c

📝 react가 필요한 이유

🧷 첫번째이유

문제발생 
사용 : 중복 코드 작성
shotgun surgery(산탄총 수술)

👉중복 코드를 작성해야 할 때,
중복되는 코드가 너무 많아지고, 코드가 길어진다.

👉 리액트 -> 컴포넌트화 방식
컴포넌트를 제작해서 불러다 쓸 수 있다.
유지보수가 좋다.

👉 react는 component 기반의 UI 라이브러리

🧷 두번째이유

명령형 프로그래밍
:절차를 하나하나 다 나열

선언형 프로그래밍
:리액트는 선언형 프로그래밍이다.
목적을 바로 말해 코드를 짧게 쓸 수 있다.

🧷 세번째이유

virtual DOM (Document Object Model)
리액트는 가상의 돔을 사용
가상의 돔에 미리 업데이트를 하고, 나중에 한번에 보여준다

---

📝react component 만들기

1. 기본 폴더 세팅

필요없는 파일들이나 코드는 삭제하고, 새로 폴더를 구성해서 기본환경값을 설정해놓는다.

2. components폴더에 만들고싶은 컴포넌트이름.js 로 파일을 만든다.

컴포넌트 파일과 컴포넌트의 이름을 동일하게 하는 것이 좋다.

const Yeonju = () => {
  return (
    <>
      <div>연주입니다.</div>
    </>
  );
};

export default Yeonju;

컴포넌트는 항상 대문자로 시작, export해서 다른 곳에 쓸 수 있게 해준다.

3. App.js 파일에 import

import './App.css';
import Yeonju from '../Components/Yeonju.js';

function App() {
  return (
    <Yeonju></Yeonju>
  );
}

export default App;

import를 해준 후, 컴포넌트를 사용하고 싶은 곳에
<컴포넌트이름></컴포넌트이름> 으로 작성

📝 component props을 통해 컴포넌트에게 값 전달

✏️ 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에서 변수는 중괄호{} 안에 넣어줘야한다.

📝 component안에 component

Components폴더에 Homil.js 컴포넌트 제작

const Homil = () => {
  return (
    <>
      <ul>
        <li>호밀</li>
        <li>현미</li>
        <li>율무</li>
      </ul>
    </>
  );
};

export default Homil;

Yeonju.js 컴포넌트에 Homil.js 컴포넌트 import

import Homil from './Homil';

const Yeonju = ({ hello }) => {
  return (
    <>
      <h1>{hello}</h1>
      <Homil></Homil>
    </>
  );
};

export default Yeonju;

📝 context API

컴포넌트에 데이터를 전달해주어야 할 때, props를 통해 전달한다.
컴포넌트안에 위치한 컴포넌트에 데이터를 전달할때,
여러 컴포넌트를 통해 props를 전달해야해서 불편하다.
그래서 전역에서 쓸 수있는 context를 이용한다.

✏️ createContext로 전역으로 관리할 데이터의 대장 만들기

1. creatContext() 선언

import { createContext } from "react";

const data = createContext();

2. 데이터를 사용할 컴포넌트를 1에서 만든 변수이름.provider로 감싸기

  return (
    <data.Provider>
      <Yeonju hello={hello}></Yeonju>
    </data.Provider>
  );

3. <변수의이름.provider value={전송할 데이터}><component></component></변수의이름.provider>로 데이터 넘겨주기

function App() {
  const hello = '곡식이네';
  const bye = '소개였습니당';
  return (
    <data.Provider value={bye}>
      <Yeonju hello={hello}></Yeonju>
    </data.Provider>
  );
}

4. 전송할 데이터가 2개 이상이라면 value={{데이터1,데이터2}} 객체로 내보낸다.

5. 1번에서 만든 데이터의 대장을 (export) 모듈로 내보낸다.

export { App, data };

6. Homil.js 에 import

import { useContext } from 'react';
import { data } from '../App/App.js';

7. return값 위에 변수 선언

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>
    </>
  );
};