[새싹X코딩온]웹 풀스택 11주차(9/25)회고록|React-환경설정, Component, Props

드디어 프로젝트가 끝나고 다시 수업을 듣게 되었습니다! 오늘은 프론트에서 매우매우 중요하다고 하는 리액트에 대해서 배워보았습니다!

---

1. 리액트 왜 배워야하지?

angular-양방향 데이터 바인딩--> 양방향 웹 애플리케이션에 적합,

react-동적 사용자 인터페이스, 페이스북에서 만든 오픈소스 javascript 라이브러리!!, 규모가 큰 라이브러리에 적합, angular보다는 배우기 쉽다. 

vue.js-2013년에 출시된 javascript 프레임워크,

 

현재 점유율은 리액트가 가장 높음

 

리액트 공식문서 React

React

 

그런데 라이브러리?? 프레임워크랑  헷갈려서 정리해보았습니다.

라이브러리(Library)와 프레임워크(Framework)는 소프트웨어 개발에서 중요한 개념이며, 각각 다른 역할과 특징을 가지고 있습니다.

라이브러리(Library):
라이브러리는 재사용 가능한 코드의 모음이며, 특정 기능을 수행하기 위한 함수, 클래스, 메서드 등을 포함합니다.
개발자가 필요한 기능을 직접 호출하여 사용할 수 있으며, 제어 흐름은 개발자가 관리합니다.
라이브러리는 프로젝트에 추가하여 사용하며, 프로젝트의 일부로 간주됩니다.
예시: 표준 라이브러리 (예: Python의 math 라이브러리), 외부 라이브러리 (예: jQuery, React Native 컴포넌트 라이브러리)
프레임워크(Framework):
프레임워크는 어플리케이션의 구조와 동작을 정의하는 추상적인 기반을 제공합니다. 개발자는 프레임워크에서 제공하는 규칙과 패턴을 따라야 합니다.
제어 흐름은 프레임워크에 의해 관리되며, 개발자는 프레임워크에게 필요한 정보나 코드를 제공합니다.
프레임워크는 개발자에게 구현할 부분을 지시하며, 어플리케이션의 골격을 제공합니다.
예시: 웹 개발 프레임워크 (예: Django, Ruby on Rails), 애플리케이션 프레임워크 (예: .NET Framework)
라이브러리와 프레임워크는 다음과 같이 요약할 수 있습니다:

라이브러리는 개발자가 필요한 기능을 선택적으로 사용할 수 있으며, 제어 흐름은 개발자가 관리합니다.
프레임워크는 어플리케이션의 구조를 정의하고, 제어 흐름을 관리하며, 개발자는 프레임워크의 규칙을 따라야 합니다.

---

2. React의 특징

1. data Flow

단방향 데이터 흐름(angular와 같이 양방향 데이터 바인딩은 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있다.)

---

2. Component기반 구조

Component: 독립적인 단위의 소프트웨어 모듈로 소프트웨어를 독립적인 하나의 부품으로 만드는 방법

한 페이지 내에서 여러 부분을 component로 만들고 이를 조립해서 화면을 구성

--> 잘 쪼개는 것이 중요하다

UI(view)를 여러 컴포넌트를 쪼개서 만든다

 

장점:

1.컴포넌트 단위올 쪼개져 있기 때문에, 전체 코드를 파악하기 쉽다.

2. 기능단위, UI단위로 캡슐화 시켜 코드를 관리하기 때문에 재사용성이 높다

(캡슐화? 데이터와 데이터를 처리하는 행위를 묶고, 외부에는 그행위를 보여주지 않는 것)

3. 코드를 반복할 필요없이 Component만 import해서 사용하면 됨-> 작성했던걸 가져오기만 하면 되는 간편함

4 애플리케이션이 복잡해져도 유지보수, 관리에 용이

 

header footer같은 구조를 컴포넌트로 제작

컴포넌트를 조합해 root component로 제작

---

3. Virtual Dom

Dom: document object model(문서 객체 모델)

 react는 dom tree구조와 같은 구조를 virtual dom으로 가지고 있다

이벤트가 발생할 때마다 virtual dom을 만들고 다시 그릴 때 실제와 전후 상태를 계속 비교->

---

4.Pros and Status

-props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터

자식에서는 props 변경불가능, props를 전달한 최상위에서만 변경 가능

 

-state:컴포넌트 내부에서 선언되고 내부에서 값을 변경

클래스형 컴포넌트에서만 사용가능 ,각각의 state는 독립적(함수형 컴포넌트에서는 안됨-->16에서부터는 사용가능하게 됨 hook???)

---

5. JSX

react에서는 JSX사용이 필수는 아니지만 편의성을 위해 대부분의 프로젝트에서 JSX 사용

JSX= javascript+XML

==>javascript를 확장한 문법으로 React Element를 생성

---

3. React를 사용하기 위한 환경설정

-node.js는 react를 사용하기 쉽게 하는 도구를 내장하고 있음

리액트도 하나의 패키지

자바스크립트 런타임인 node.js 기반으로 만들어진 webpack과 babel 같은 도구를 자주 사용

 

babel?? 최신 javascript문법을 이전 버전의 javascript 문법으로 변환해주어 다양한 브라우저에서 호환성을 높여줌

 

webpack?? 자바스크립트 모듈 번들러

여러개의 파일과 모듈을 하나의 파일로 합쳐준다.

코드 변경 사항 발생 시 바로 반영되는 기능

 

근데 이거 외에도 유튜브를 찾아보니,,, 요즘엔 Vite라는 것도 사용한다고 합니다

(101) 와 Vite 쓰면 리액트 10배 빨라짐 (과장아님) - YouTube

 

 

리액트 프로젝트 생성하기

-리액트 앱(프로젝트) 이름 규칙: 대문자 사용 불가능, 단어 여러개 사용시 하이픈(-)기호로 구분

-npx: npm의 자식 명령어로 npm보다 가볍게 패키지를 구성, node버전이 14이상일 때 자동으로 사용가능

 ==> $ npx create-react-app 프로젝트 이름

$ cd test-app

$ npm start

자동으로 localhost:3000으로 연결됨

이런식으로 폴더구조가 자동으로 생성됨

/src: 실제 react 코드(컴포넌트)를 작성하는 곳!

---

4. Component

-react의 꽃이라 불리는 React의 핵심!!!

-react를 화면을 구성하는 하나의 부분

-내부의 데이터만 변경해서 전체적인 틀(UI) 재사용 가능하게 만들어줌

-각 조각을 또 나누어서 분리 가능

-비슷한구조의 것들이 반복되는걸 컴포넌트로 만들어서 쭉 반복문을 돌리면 됨

 

재사용되고 있는 부분을 담닥아하고 있는 작은 단위의 컴포넌트-> 페이지의 부분을 담당하고 있는 컴포넌트->페이지 전체를 담당하고 있는 컴포넌트 

---

Component 트리구조

---

클래스형 컴포넌트

-render함수를 반드시 사용해야함

-lifecycle기능

-컴포넌트를 만들 때 기존 컴포넌트클래스에서 상속받아서 사용

 

함수형 컴포넌트

-짧고 직관적, 사용방법 더간단

-메모리 사용에 이점

 

==> 비교

-react초창기에는 함수형 컴포넌트에서 현재 리액트의핵심기능(state, lifecycle,..등)기능을 사용할 수 없었음

-16.8부터 hooks의 등장으로 함수형 컴포넌트에도 핵심기능 사용가능

-컴포넌트 이름은 PascalCase사용!!

---

5. JSX문법 알아보기!!

javascript+XML

-바벨을 이용해 일반 자바스크립트 코드로 변환

 

1. 전체는 하나의 태그로 감싸야함

html태그는 항상 return이후에,반드시 하나의 부모요소가 전체 요소를 감싸는 형태로!!!

2. html with Js

html을 작성하다가 js문법을 사용하고 싶을 때에는 {중괄호}로 감싸서 사용!!

변수명 같은것도 중괄호 안에 넣어서 사용하면 됨

ejs에서 <% %>같은 놈인듯

중괄호 써서 js문법 쓰다가 html태그 사용하려면 html태그는 소괄호()안에!

JSX 삼항연산자 대신 if 문이 올 수 없어요,

+ for문또한 JSX 내부에 올 수 없어요!

(for문과 if 문을 사용하고 싶다면 return 이 오기 전에 결과값을 저장하고 사용

 

3. 인라인 style적용

Css속성은 dash-case->camelCase

return 위에 object를 변수에 담아놓고 사용할 수 있다. 

 

4. class와 onclick

class 대신 className, onclick 대신 onClick

 onClick={실행되었을 때 실행할 js코드}

 

5. closing tag

opening tag(빈태그)도 closing tag가 필요함

원래 input태그의 경우 닫는 태그가 없지만 JSX에서는 닫는 태그를 만들어 주어야 함

<input></input>이런 식으로~~

 

6. 주석 사용

주석은 {/* 이렇게 사용한다*/}

return 밖에서는 원래대로 /* */이렇게 사용

 

---

6. 리액트 디버깅 

기존 js에서는 에러를 확이하기 위해서 콘솔창으로 봤어야 했지만 리액트는 치명적인 버그일 경우 화면에 바로 띄워줌

js의 문제점을 보완하고자 strict mode 강제--> 어디에서 실수했는지까지 자세히 제공함,, 에러창을 두려워하지말고 에러 메세지 잘 읽기

(근데 이때까지 본 어떤 에러창보다 무섭게 생겼더라구요ㅋㅋㅋㅋㅋㅋㅋ)

 

---

리액트 할떄 좋은 확장 프로그램

:react developer

--> 리렌더링 되는 컴포넌트를 확인 가능

---

7. Props & States

Props? properties의 약자

컴포넌트끼리 값을 전달하는 수단

상위컴포넌트에서 하위 컴포넌트로 전달(단방향 데이터 흐름)

함수형 컴포넌트 props

부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터로 전달받으며, JSX내부에서 {} 기호로 감싸서 사용함.

 

defaultProps: 부모컴포넌트에서 props가 전달되지 않았을 때 기본값으로 보여줄 props를 설정하는 것, 부모 컴포넌트에서 값이 없다면 defaultProps를 가져오게 됨

 

props.children: 부모 컴포넌트에서 자식 컴포넌트를 호출 할 때 태그 사이에 작성한 문자열 

 

propTypes: 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용

->javascript의 유연한 특성을 해결하기 위해 권장되는 기능

다른 타입의 정보가 전달되면, 제대로 동작은하지만 console에서 오류가 나타납니다.

 

클래스형 컴포넌트 ClassComponent.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
// class ClassComponent extends React.Component {}
class ClassComponent extends Component {
  student = 'SeEun';
  // 클래스형 컴포넌트는 render함수 필수
  render() {
    const { name } = this.props;
    console.log('props:', this.props);
    return (
      <div>
        <h1>Hi {this.student}!</h1>
        <p>여기는 ClassComponent</p>
        <p>
          새로운 컴포넌트의 이름은 <b>{this.props.name}</b>
        </p>
        {/* 위의 코드와 같은 코드 (밑에껀 구조분해 적용한거)*/}
        <p>
          새로운 컴포넌트의 이름은 <b>{name}</b>
        </p>
      </div>
    );
  }
  //   static defaultProps = {
  //     name: '홍길동',
  //   };
  //   static propTypes = {
  //     name: PropTypes.string,
  //   };
}
ClassComponent.defaultProps = {
  name: '홍길동',
};
// default도 없어야 isRequired 동작함
ClassComponent.propTypes = {
  name: PropTypes.string.isRequired,
};
export default ClassComponent;

App.js

import ClassComponent from './ClassComponent';
function App() {
return(
 <div className="App">
	<ClassComponent name="새싹" />
    <ClassComponent />
    <ClassComponent name={true} />
 </div>
 )
 }
 export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이런 흐름으로 코드가 돌아간다고 보면 됩니다!!

---

함수형 컴포넌트

FunctionComponent.js

import PropTypes from 'prop-types';

// export default function FunctionComponent(props) {
export default function FunctionComponent({ name }) {
  const student = 'SeEun';
  //   const { name } = props;
  //   props가 여러개있다면 구조분해해서사용하는것이 좋겠지?

  return (
    <div>
      <h1>Hi {student}!</h1>
      <p>여기는 FunctionComponent</p>
      {/* <p>
        새로운 컴포넌트의 이름은 <b>{props.name}</b>
      </p> */}
      {/* 위의 코드와 같은 코드 */}
      <p>
        새로운 컴포넌트의 이름은 <b>{name}</b>
      </p>
    </div>
  );
}
FunctionComponent.defaultProps = {
  name: '홍길동',
};
FunctionComponent.propTypes = {
  name: PropTypes.string,
};

App.js

import FunctionComponent from './FunctionComponent';
function App(){
 <div className="App">
  	  <FunctionComponent name="영등포 새싹" />
      <FunctionComponent />
      {/* name 값이 없으면 defaultProps에 의해서 홍길동이 들어가게된다 */}
      <FunctionComponent name={true} />
 </div>
 }
 export default App;

index.js는 동일하니까 생략!

---

추가 예제

Button.js

import './Button.css';
const Button = (props) => {
  const { link, children } = props;
  return (
    <a href={link}>
      {/* 부모컨포넌트의 google이라는 값이 props.children으로 들어감 */}
      <button className="Button">{children}</button>
    </a>
  );
};
export default Button;

App.js

import Button from './Button.js';
function App() {
return(
<>
<Button link="https://www.google.com">Google</Button>
</>
);
};
export default App;

다음시간에는 state부터 배우도록 하겠습니다~