React

• 리액트에 대해 전반적으로 알아보자!!

간단한 리액트 소개

• 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리

• “컴포넌트”라는 작은 코드의 부분(파편)을 이용하여 복잡한 UI 구성 가능

컴포넌트

• 재사용이 가능한 각각의 독립된 모듈

• 장점: 재활용성 증가, 코드 유지보수 용이, 페이지 구성 파악 용이

• Class 컴포넌트: 함수형에 비해 문법과 사용법이 복잡

  • 초기에 많이 사용되던 형태

  import React, {Component} from 'react';
  
  class App extends Component {
  	render(){
  		...
  	}
  }
  //class 키워드, Component 상속, render 매소드 반드시 필요
  
  

• Function 컴포넌트: 클래스형에 비해 간단하고 단순함

  • hooks라는 기능이 추가되면서 state 관리가 용이해짐 → 함수형 컴포넌트의 인기 증가

  import React from 'react';
  
  const App = () => {
  	...
  }
  
  export default App;
  //간결한 코드 작성 가능
  //함수 자체가 랜더 함수 render매서드 필수 아님
  //Component 상속 불필요
  
  

Node

js코드를 읽고 실행하는 도구 → 자바스크립트 실행환경 (ex 브라우저)

Node는 브라우저 밖에서 자바스크립트 실행이 가능하게 하는 자바스크립트 실행환경

NPM

Node Package Manager의 약자로 노드를 실행할 수 있는 여러 패키지들을 관리하는 매니저 도구!

상태관리

로컬 상태(local State)

• 특정 컴포넌트 내에서만 관리

• 함수형 컴포넌트에서는 리액트 hook과 props를 사용하여 상태관리하는 것

• 하위 컴포넌트로 데이터를 전달하기 위해 함수형 컴포넌트의 props를 많이 사용하는데 일이 커질수록 props drilling이 증가

  → 반복작업 증가, 유지 보수가 어려워짐

props drilling ?

• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것

  • 중간 B컴포넌트는 그 데이터가 필요하지 않아도 오직 전달하기 위해 props이 있어야 함!

출처: https://codingpracticenote.tistory.com/56

• props drilling의 장점

  컴포넌트 간에 데이터를 쉽고 빠르게 전달 가능

  application이 작은 규모일 경우, 데이터의 흐름을 알 수 있음

• props drilling의 문제

  • 필요하지 않은 props가 남거나 전달될 수 있음

  • props의 이름을 변경하면 알기 힘들어짐

• 문제 해결

  • 컴포넌트를 과도하게 나누지 않는다

  • Children을 사용한다! → 하나의 컴포넌트에서 값 관리 가능

전역 상태

• 프로젝트 전체의 상태 관리를 총괄하는 방법

• 말 그대로 전역에서 관리, 모든 컴포넌트에서 상태 값 반영 및 변경 가능

장점

• 유지 보수가 간편해짐

단점

• 상태 관리 오류의 사이드 이펙트가 커질 수 있음!