리액트 입문주차 1주차 - 2

1.  CRA(Create React App)

ⅰ. CRA란?

Create React App : Set up a modern web app by running one command.

• 한 줄의 명령어 입력으로 React 프로젝트 개발 필수요소를 자동으로 구성하는 방법
  • React 프로젝트를 구성하기 위해 필요한 것들은 무수히 많음
    ex) WebPack, babel, eslint 등
  • 이러한 것들을 신경 쓰지 않아도 알서 해주는 것을 보일러 플레이트라함

❓ 보일러플레이트란?
보일러플레이트 코드의 어원은 신문사업에서 나옴
1890년대에 광고나 칼럼과 같이 계속 사용되는 텍스트 인쇄판은 부드러운 납 대신 강철로 찍기 시작했는데 이를 보일러 플레이트(Boilerplate)라고 부름

• CRA를 사용하지 않으면 react, react-dom, babel, webpack 등 모든 세팅을 혼자 해야 함

ⅱ. CRA로 프로젝트 생성하기

• 리액트 프로젝트 생성해 보기
  • 윈도우는 git bash 또는 powershell, mac os는 터미널에서 아래 코드를 입력
    powershell은 윈도우 터미널 프로그램이고 git bash는 git을 설치 했을 때 같이 설치되는 터미널 프로그램

ls # 현재 내가 위치하고 있는 곳이 어디인지 확인

cd 폴더 이름 # 리액트 프로젝트를 생성하고 싶은 폴더로 들어가기

yarn create react-app week_1
# npm init create-react-app week_1

• 생성된 파일을 VScode로 켜서 폴더 구조를 확인

react 기본 구조

ⅲ. CRA로 생성한 프로젝트 실행하기

• VScode 터미널에서 아래의 명령어로 생성한 프로젝트를 실행하기

yarn start # 프로젝트 실행하기

ⅳ.  프로젝트 구조 살펴보기

• CRA로 생성한 프로젝트엔 index.html 이 있음
  index.html 파일 안에서 리액트가 다 보여준다고 생각하면 됨
  아이디가 root인 div태그 하나만 존재함 => index.js 파일로 가면 id가 root인 태그를 getElementById로 찾아서 createRoot를 하고 있음
  그 후 렌더링 해줌
• 실질적으로 코딩을 할 수 있는 폴더는 App.js 파일

ⅴ. 상대경로 import => 절대경로 지정하기

• 상대경로(relative path)를 사용하게 되면 폴더 안에 폴더 안에 폴더가 많아지면 한눈에 보기 쉽지 않음
  이러한 이유로 절대경로를 세팅하여 사용하면 됨
• 절대경로 세팅하는 법
  
  

jsconfig.json 파일 생성

1.  위에 사진과 같이 sconfig.json 파일을 root 경로에 생성함
2. 아래의 코드를 작성해 주기

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

• 절대경로 세팅이 끝나면 폴더로 돌아가서 import 파일 위치를 수정해 주면 됨

2.  React Component

ⅰ. React Component

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.
"props"라고 하는 임의의 임력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

• 각조각을 개별적으로 살펴볼 수 있다는 말을 독립적이다는 것
• 함수는 input, output이 존재하는데 이것처럼 컴포넌트도 props라는 input을 받고 화면에 어떻게 표시하면 되는지 기술하는 Recat 엘리먼트를 output으로 줌 => 함수형 컴포넌트라고 볼수 있음
• 리액트 컴포넌트를 표현하는 두 가지 방법
  • 함수형 컴포넌트
  • 클래스형 컴포넌트(먼저 나온 방식)

// 1. 함수형 컴포넌트
// props라는 입력을 받고
// 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 리턴해줌

const Welcome => props => {
	return <h1>Hello, {props.name}</h1>;
}

// 2. 클래스형 컴포넌트
// class라는 키워드로 기재된 React.Component를 상속받아서
// 기재하는 render() 함수를 이용해서 class형 컴포넌트를 선언
class Welcome extends React.Component { 
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

• 두 개 모두 기능상으로는 동일하지만, 공식홈페이지에서는 함수형 컴포넌트를 사용하기를 권장함
• 함수형 컴포넌트가 클래스형 컴포넌트보다 사용방법이 훨씬 쉬움

결론적으로 리액트 세계에서 말하는 컴포넌트(블록)는 즉 함수
컴포넌트를 만들어 보라고 하면 html을 리턴하는 함수를 만들면 됨

ⅱ.  CRA 프로젝트 살펴보기

• 기본적으로 작성되어 있는 App.js를 통하여 컴포넌트 살펴보기

import logo from './logo.svg';
import './App.css';

function App() {
  // javascript를 작성할 수 있는 영역
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

• 컴포넌트 밖에서는 필요한 파일을 import 하거나 export default라는 기능을 통해서 내가 만든 컴포넌트를 밖으로 내보내는 코드가 존재함
  위에 코드를 보면 import가 존재하고 export가 존재함 => im하면 안쪽이라는 의미를 포함, ex 바깥쪽이라는 의미가 포함, port는 항구라는 뜻. 쉽게 말해 수입하고 수출한다라고 생각하면 쉽게 생각할 수 있음
  ❗ 컴포넌트는 내보내거나 가지고 온다과 생각하면 쉬움!!!!
• 컴포넌트 내부에는 JavaScript를 쓸 수 있는 영역이 존재함 => JavaScript로 생각하면 함수 내부!!
  return문을 기준으로 바로 밑에 부분이 html 같이 생긴 부분을 작성하는 부분 => 실제로 html이 아님
  ❓ html이 아닌 이유
  실제로는 이 문법들은 HTML이 아닌 JSX문법
  JSX문법이라는 것은 JavaScript랑 XML의 합성어, XML은 HTML과 거의 유사
  JSX문법 안에서 JavaScript를 사용하고 싶으면 중괄호 안에 작성해 주면 됨

컴포넌트 살펴보기 [출처: React입문강의]

• 주의해야 할 점
  • 컴포넌트를 만들 때는 반드시 첫 글자는 대문자여야 함
    => 소문자로 작성하게 되면 오류가 발생함
  • 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 만듦

ⅲ.   컴포넌트 만들어보기

• App.js에서 아래의 코드를 복사해 와서 시작!

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

• HTML 영역 안에 알맞은 html 태그를 작성하여 화면을 구성하기

HTML 작성해보기]

import React from "react";
const App = () => {
  // <---- 자바스크립트 영역 ---->

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <p>이것이 내가 만든 App컨포넌트 입니다</p>
      <button>클릭!</button>
    </div>
  );
};

export default App;

• 클릭! 버튼을 눌렀을 때 alert(경고) 창이 나타나게 하기

alert(경고창)보여주기

import React from "react";
const App = () => {
  // <---- 자바스크립트 영역 ---->
  const handle_click_btn = () => {
    return alert("클릭!");
  };

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* spna 태그로도 가능 */}    
      <p>이것이 내가 만든 App컨포넌트 입니다</p>
      <button onClick={handle_click_btn}>클릭!</button>
    </div>
  );
};

export default App;

ⅳ. 부모 - 자식 컴포넌트

• 컴포넌트 안에 컴포넌트 넣기
  • 컴포넌트는 다른 컴포넌트를 품을 수 있음
  • 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트, 다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라 함
    => 계층식 구조

// App.js
import React from "react";

// 자식컴포넌트
const Child = () => {
  return <div>나는 자식입니다.</div>;
};

// 부모컴포넌트
const App = () => {
  return <Child />;
};

export default App;

• 위에서 주가 되는 파일은 App()
  App.js파일 안에서 Child라는 새로운 컴포넌트를 생성(자식컴포넌트)
  Child 컴포넌트를 App 컴포넌트(부모컴포넌트)를 통해서 마치 HTML 태그를 쓰듯이 넣음
• return문의 가장 상단에는 태그가 하나만 존재해야 함
  태그가 여러 개일 경우에는 return문 뒤에 소괄호로 묶어줘야 함
• ❓ 이러한 컴포넌트화가 필요한 이유
  반복되는 로직이 생길 경우에 이러한 것들이 필요

3.  JSX(JavaScript + XML)

ⅰ.  JSX란?

• JavaScript를 확장한 문법이라 할 수 있음
• React에서는 딱 하나의 html 파일만 존재함 => public 폴더 아래에 있는 index.html
• React에서는 JSX문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 보여줌
• HTML 태그들은 .js 파일안에서 사용할수 없음
  그래서 나온게 JSX => 자바스크립트 안에서 html 태그같은 마트업을 넣어 뷰(UI) 작업을 편하게 할 수 있음

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

JSX에서 쓰는 <div></div> 는 DOM 요소인지?
정확히는 React 요소
리액트 돔을 구성하는 건 리액트 요소!
돔을 구성하는건 돔 요소!!

ⅱ.  JSX 실습해보기

• 태그는 반드시 닫아주기

import React from "react";

const App = () => {
  return (
    <div>
      <input type="text" >
    </div>
  );
};

export default App;

닫는 태그 안썻을때 발생하는 오류

// 코드 수정
<input type="text" />

• 무조건 1개의 엘리먼트를 리턴하기 => 반드시 최상위 태그는 1개만 존재!!!

import React from "react";

const App = () => {
  return (
    <div>
      <input type="text" />
    </div>
    <p>Hello</p>
  );
};

export default App;

최상위 태그 2개 오류

// 오류 수정
    <div>
      <div>
        <input type="text" />
      </div>
      <p>Hello</p>
    </div>

• JavaScript 값 가져오기 -> 중괄호{}를 사용하여 가져옴

// 1.
import React from "react";

const App = () => {
  const a = 7;
  const b = 10;

  return <div>안녕하세요 {a + b}입니다.</div>;
};

export default App;

// 2
const App = () => {
  const num = 1;
  return (
    <div>
      <p>안녕하세요</p>
      {/* 주석을 사용하는 방법입니다. window - Ctrl + / macos - command + / */}
      {/* 삼항연산자를 사용 */}
      <p>{num > 10 ? `${num}은 10보다 크다.` : `${num}은 10보다 작다.`}</p>
    </div>
  );
};

• class 대신에 className

<div className="App">

• 인라인으로 style주기
  • css 문법 대신 json형식으로 넣어주기
  • 중괄호를 두 번 쓰는 이유는 객체도 자바스크립트 이기 때문에

// HTML
<p style='color: red'></p>

// JSX
<p style={{ color: "red", }}></p>

const pTagStyle = {  // 변수로 빼서 재사용할 수 있음
	color: "red",
}
<p style={pTagStyle}></p>