[TIL #15] 231031_React란? CRA와 Component의 개념

Bora.K | 권보라·2023년 10월 31일

JavaScript React TIL

TIL

목록 보기

15/51

오늘 한 일

[내배캠] React 입문 1주차 강의
- 1-13까지 듣기

학습 내용

React란 무엇인가?

A JavaScript library for building user interfaces
UI(보여지는 부분)를 Buiding(구축)한다는 의미

SPA 기반의 프론트엔드 개발 프레임워크 중 하나

컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용

Angular JS, Vue JS보다 월등히 인기가 많다.

1. SPA(Single Page Application) 아키텍쳐

한 개의 페이지로 이루어진 애플리케이션

(1) 기존 MPA(Multy Page Application)의 문제점
리렌더링(페이지가 갱신)이 되어 페이지가 계속 로딩되고 깜빡거리게 됨

(2) SPA의 특징과 장점

딱 한 개의 페이지(Single Page)로 구성된 웹 앱 (index.html)
서버에 1회만 리소스 요청
필요할 때, 데이터만 받아와서 기존 페이지를 수정해 주는 방식
사용자 입장에서 깜빡임 없는 자연스러운 UX 구현 가능

(3) SPA의 단점

SEO(Search Engine Optimization)에 약함

2. 컴포넌트(Component)

헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트를 만들어서 웹 사이트를 만든다!

SPA 기반: 컴포넌트 단위로 변경 사항을 반영하여 깜빡임 없음
MPA 기반: 하나의 변경사항을 반영하기 위해 전체 페이지 리로드

CRA(Create React App)

1. CRA란?

Set up a modern web app by running one command.
한 줄의 명령어 입력으로 React 프로젝트 개발에 필요한 필수요소를 자동으로 구성

2. CRA 프로젝트 생성

ls 현재 내가 위치하고 있는 곳이 어디인지 확인
cd 폴더이름 리액트 프로젝트를 생성하고 싶은 폴더로 이동
yarn create react-app week-1 프로젝트 생성!
yarn start yarn 시작

우리의 플레이그라운드는 App.js!!
상대경로 import → 절대경로 지정하기
경로 지정시 ./ 와 같은 상대경로 없이 경로 지정이 가능하다. 실제로 팀 프로젝트 당시 github에 push했을 때 경로 지정을 ./로 안해서 오류가 생긴 적이 있다. 해당 파일 생성 후 작업하면 이런 절대경로 지정을 통해 좀 더 편안하게 경로 지정이 가능하겠다.
1. jsconfig.json 파일 생성(root 경로에 만들 것)
2. 다음 내용 작성
```
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

React Component

1. React Component란?

컴포넌트 개념
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누어 독립적으로 사용
입력: “props” → 반환: React 엘리먼트
쉽게 말해서 html을 return하는 함수!

(1) 함수형 컴포넌트

function App (props) {
	return <div>hello</div>
}

(2) 클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2. CRA 프로젝트 살펴보기

jsx 형태로 return : 해당 부분은 html처럼 생겼지만, html이 아닌 jsx(javascript + XML) 문법

중괄호와 return 사이에 자바스크립트 작성

jsx 란에 javascript 요소를 쓰고 싶으면 {} 사용

컴포넌트 변수 이름은 무조건 대문자로 시작!!

폴더는 소문자, 카멜케이스

(1) 첫번째 방법: jsx 영역에서 구현
onClick{} javascript의 onclick이랑 비슷하지만 살짝 모양이 다르다.
onClick{function() {}} 형태로 함수 사용

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  return (
  // <---- HTML/JSX 영역 ---->
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <span>이것은 내가 만든 App 컴포넌트 입니다.</span>
      <button
        onClick={function () {
          alert("클릭!!");
        }}
      >
        클릭!
      </button>
      {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

(2) 두번째 방법: javascript 영역에서 구현

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

  return (
  // <---- HTML/JSX 영역 ---->
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <span>이것은 내가 만든 App 컴포넌트 입니다.</span>
      <button onClick={onClickButtonHandler}>클릭!</button>
      {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

javascript를 삽입하기 위해 중괄호 사용
태그에 스타일을 부여하기 위해서는 key-value pair로 이루어진 객체를 javascript 문법으로 삽입

3. 부모-자식 컴포넌트

컴포넌트는 다른 컴포넌트를 품을 수 있다. 이 때 품는 컴포넌트를 부모 컴포넌트, 품어지는 컴포넌트를 자식 컴포넌트라고 부른다.

반복되는 로직이 생길 때 컴포넌트화하여 사용

import React from "react";

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

function App() {    // 부모 컴포넌트
  return <Child />;   // Child 컴포넌트를 품고 있음. 컴포넌트화 시킴
}

export default App;   // App 컴포넌트 내보내기

Props

1. props란?

컴포넌트끼리의 정보 교환 방식
부모 컴퍼넌트가 자식 컴포넌트에게 물려준 데이터

부모에서 자식 방향으로만 흐른다.

props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

2. props로 값 전달

import React from "react";

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

function GrandFather() {
  return <Mother />;
}

function Mother() {
  const name = "홍부인";   // 자식 컴포넌트인 Child에 전달 가능
  return <Child motherName={name} />;   // props로 name을 전달!
}

function Child(props) {
	console.log(props);   // {motherName = "홍부인"} 객체로 전달(데이터들의 묶음)
  return <div>나는 {props.motherName}의 아들이예요!</div>;   // 전달 받은 값 렌더링
}

export default App;

3. prop drilling

[App] → [GrandFather] → [Mother] → [Child]이 데이터를 받기 위해 3단계를 거쳐야 함
props를 전달하는 기능만 갖는 단계가 많으면 유지보수 측면에서 어려움 → Redux 툴로 해결

오늘의 회고

React의 개념에 대해 처음 접했는데, CRA 사용 시 한 줄의 명령으로 필요한 요소들을 한 번에 다운 가능하다니 신세계다. 점점 배워야 할 것들이 많아진다.
javascrip 문법과는 모양이 다르다. 강의를 좀 더 충분히 듣고 숙지해서 익숙해 져야겠다.
오늘 새로운 팀을 배정받았다. 기존 팀원들과 정이 들어 너무 아쉽지만, 더 많은 경험을 위해 새로운 팀에 빠르게 적응해야 한다. 첫 날이지만 서로 대화를 많이 나눴다. 다들 능력자이고, 열정도 많아보인다. 새로운 팀 프로젝트가 기대된다.

내일 할 일

[내배캠] React 입문 1주차 강의
- 1-21까지 완강
- 스탠다드반 수준별 수업(JS문법 정리)

Bora.K | 권보라

Frontend Engineers

이전 포스트

[TIL #14] 231027_헷갈리는 CSS

다음 포스트