React

최정훈·2022년 6월 1일
0

Why React?

  • Web Application의 발전
  • Frontend Framework(Library) - Angular / Vue / React

What is React?

  • 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

  • 가상 돔(Virtual Dom) :  이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술

    • Document → HTML

    • Object

    • Model

      CRA - What? & Why?

  • 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)

  • CRA 는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다.

  • CRA 를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.

CRA - Settings

  • CRA install - npx create-react-app webucks-react

  • CRA 기본 폴더 및 파일 구성

    1. node-modules - package.json - .gitignore
    2. index.html - index.js - <Routes />
  • public 폴더

    1. index.html
    2. images
    3. data
  • src 폴더

    1. components

    2. pages

    3. styles - reset.scss, common.scss

    4. Routes.js

      컴포넌트의 정의

  • 재활용 가능한 UI 구성 단위

  • 개별로 배포가능한 최소한의 단위

컴포넌트의 특징

  • 재활용하여 사용할 수 있다.
  • 코드 유지보수에 좋다.
  • 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다. (예시)
  • 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

컴포넌트의 종류

  • Class형 컴포넌트(Class Component) vs. 함수형 컴포넌트(Functional Component)
  • Class Component
    import React from 'react'
    
    class Component extends React.Component {
    	constructor() {
    		super();
    		this.state = {
          list: []
        };
    	}
    
      componentDidMount() {
        fetch('주소')
    		.then(res => res.json())
        .then(data => this.setState({ list: data }));
      }
    
      componentDidUpdate(prevProps, prevState, snapshot) {
    		if (prevState.list !== this.state.list) {
    			console.log("list가 변경되었습니다.")
        }		
      }
    
      render() {
        return (
    			<div>
    				<h1>This is Class Component!</h1>
    			</div>
    		)
      }
    }
    
    export default Component
  • Lifecycle : constructorrendercomponentDidMount → ( setState ) → render

JSX 정의

  • 리액트에서 사용하는 자바스크립트 확장 문법
  • JavaScript Syntax Extension

JSX 특징

<>
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>
  • Function Component
    import React, { useEffect, useState } from 'react'
    
    function Component(props) {
    	const [ list, setList ] = useState([]);
    
    	useEffect(() => {
        fetch('주소')
    		.then(res => res.json())
        .then(data => setList(data));
      }, []);
    
      useEffect(() => {
        console.log("list가 변경되었습니다.")
      }, [ list ]);
    
      return (
    		<div>
    			<h1>This is Class Component!</h1>
    		</div>
    	)
    }
    
    export default Component
  • Hook : useEffect, useState, (useMemo, useCallback, ...)
profile
사과

0개의 댓글