React JS

개인 과제

나만무 시작 전,
개인 과제를 진행하고 관련 프레임워크에 대한 공부를 하기 위해
내가 정한 것은 ‘프론트엔드’이며,
그 중 관련된 것은 ‘React’였다

처음에는 three.js를 사용하려 했는데
과제 완성 후 -> three.js 를 적용하려 하니
생각보다 시간이 오래걸리기도 하였고
three.js의 3D 에 UI를 재배치하는 과정을 생각하니

현재 사용한 react에 대하여 더 공부하는 것이
차후 팀 프로젝트에 용이하다고 생각하였다

정리하다보니 TIL이 아니라 WIL이 되었다..

JS는 인터프리터 언어

전통적인 컴파일 언어인 C,C++ 과는 다르게
JS는 인터프리터 언어이다(그리고 찾아보니 python 역시 인터프리터 언어이고)

기본적으로 C,C++은 예전에 배웠던 ‘빌드과정’을 따라서
(전처리 -> 컴파일 -> 어셈블리 -> 링킹)
컴파일 / 빌드 가 진행되는데
JS와 python의 경우는 조금 다르다
(정확히는 빌드 과정이 존재하지 않음)

컴파일 언어의 경우는 많은 ‘목적 코드’를 만들고
이들을 ‘링킹’하여 하나의 exe 파일로 묶어준다

이러한 빌드(컴파일) 과정을 통하여,
완성된 파일의 실행속도는 빠르지만
별도의 컴파일 시간이 필요하다

인터프리터 언어의 경우,
별도의 컴파일 단계가 필요없이 소스코드를 ‘해석’하며
이를 바로 실행한다

이로 인해, 별도의 컴파일 시간이 필요없어 개발 시간이 단축되는
장점이 있음
(물론, 그만큼 ‘해석’하는 과정으로 인하여 실행속도가 저하된다는
trade-off가 존재한다)

React 라이브러리에 대하여

React는 사용자 인터페이스(UI)를 만들기 위한 일종의 라이브러리
그 기반으로 자바스크립트를 두고 있으나,
타입 스크립트도 사용이 가능하다

개인적으로 구현하며 느낀
React 라이브러리의 특징은 크게 3가지로

• Virtual DOM
  
• Component 방식
  
• JSX
  이다
  

Virtual DOM

React는 데이터의 변경에 따라,
‘필요한’ 부분만 렌더링 하는 특징을 지녔는데
이는 DOM(문서 객체 모델)을 직접 조작하지 않고
가상의 DOM을 만들어 차이점을 비교한 후,
그 차이점을 실제 DOM에 적용하는 방식을 택한다
=> 따라서 데이터의 잦은 변경이 필요한 경우 성능 향상을 기대할 수 있음

Component

HTML의 문법만 사용하는 대신
컴포넌트 클래스를 이용하여
재활용하는 디자인 패턴이 큰 특징이다

개인적으로 React 자체를 공부하기 전에 JS를 먼저 공부하였는데
HTML을 재사용하는 방식은 여러모로 까다로웠다
(CreateDocument로 동적 HTML을 만드는 방식이나,
HTML에서 직접 가져오거나, 아니면 리터럴로 작성을 해야 하는 방식 등등)

반면 React 에서는

 export default function Home() {
  return (
    <Wrapper>
      <PostTweetForm />
      <Timeline />
    </Wrapper>
  );
}

이런식으로 구성한 뒤, 다른곳에서 호출하는 방식으로 사용하기 좋았다
(참고로 PostTweetForm 과 Timeline도 다른 js 파일에서 선언해둔 UI Function이다)

참고할만한 추가적인 점은
부모 컴포넌트(지금은 Home)에서 렌더링 될때,
그 자식 컴포넌트들도 다시 렌더링 된다는 점이다
(보통 React.memo 와 같은 기능을 이용하여 래핑 해줌으로
불필요하게 다시 그릴 필요 없는 컴포넌트로 만들어주기도 함)
(다만 모든 것을 meme 하는 경우, 불필요한 오버헤드가 발생할 수 있다고 한다)

JSX

React에서 반드시 사용이 권장되는 것도 아니며,
JSX가 반드시 React에서 사용되는 것은 아니지만,
여러모로 생산성의 향상에 도움을 주는 문법이다

정확히는 JaveScript XML 의 약자이며
자바스크립트의 확장 문법이다
(다만, 브라우저는 이 문법을 이해할 수 없기에
‘변환’을 위하여 ‘Babel’과 같은 추가적인 도구가 필요하다)

그래도 자바스크립트에서 HTML을 보지 않고
UI요소를 표현할 수 있고,
위에서 말한 ‘컴포넌트’ 표현 방식에 큰 도움을 준다

HTML과 변수명이 다르다던가(className),
코드 쪽 변수를 대입할 때 {}를 사용하며,
style을 지정할 때는 로 한다
그리고 DOM 트리구조를 위하여 코드 작성 시,
‘div’ 태그로 감싸주어야 한다
(차이점 : https://velog.io/@brgndy/%EB%A6%AC%EC%95%A1%ED%8A%B8-JSX-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC)

기능적 문법에 대하여

React 라이브러리에서 ‘컴포넌트’의 종류가 2가지로 나뉘어 있다

• 클래스형 컴포넌트
• 함수형 컴포넌트

클래스형과 함수형에 따른 각각의 예시를 나타내자면

클래스형
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

함수형
import React, { useState } from 'react';

const MyFunctionalComponent = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

추가적으로 특징을 적자면

• 클래스형 컴포넌트
  내부적으로 state 개체를 가지며,
  다양한 ‘라이프사이클’ 메서드를 가진다
  (render 메서드를 통해 컴포넌트의 UI를 반환한다는 점)
  

• 함수형 컴포넌트
  useState를 통해 ‘state’를 관리하고
  useEffect를 통해 ‘라이프사이클’과 관련된 메서드를 처리하게 할 수 있음
  (이러한 함수들을 ‘hook’라 하며 클래스형 컴포넌트에서만 사용할 수 있었던 기능을
  함수형 컴포넌트에도 사용할 수 있게 해줌)
  

최근에는 함수형 컴포넌트가 선호되는 경향이라 한다
코드의 길이가 짧고, 조금 더 작은 단위로 쪼갤 수 있다는 특징은
가독성이 좋다는 뜻이며 이는 협업과 유지 보수에 큰 도움이 된다
(+ 재활용성)

추가적으로 React의 State와 Effect에 대하여 말하자면

• State(상태)
  

  React 컴포넌트 안에서 관리되는 ‘데이터’의 상태
  ‘상태’가 변경되면 React는 해당 컴포넌트를 다시 렌더링 한다
  

• Effect(효과)
  

  함수형 컴포넌트에서 ‘부수 효과’를 수행할 때 사용한다
  (보통 부수 효과는 I/O 작업, 네트워크 요청, DB 접근 등을 말하는데,
  함수의 원래 역할이 아닌 다른 역할을 할 때, 이러한 표현을 사용한다)
  (구체적으로는 외부에 영향을 주는 것을 표현한다)
  

  첫번째 인자로 컴포넌트가 ‘렌더링’ 될때마다 실행하는 함수를 넣으며,
  두번째 인자로 특정한 ‘의존성’을 넣을 수 있다
  (두번째 인자는 선택적 요소)
  두번째 인자에 따라 크게 3가지 방식으로 effect를 사용할 수 있다
  

  1. 아무것도 넣지 않아 매 프레임마다 호출
     
  2. 빈 의존성 배열([])을 넣어 첫 프레임만 호출
     
  3. 특정한 ‘state’를 넣어, 해당 state의 변경에 따른 호출
     

  추가적으로 첫번째 인자로 넣는 함수에 ‘return’으로 다시 함수를 넣어줌으로서
  cleanUp (일종의 소멸자) 역할의 함수를 만들 수 있음