React 시작하기!

김하진·2022년 12월 27일

어쩌다 보니, 회사를 옮기게 되었다. 하지만 이 회사에서는 풀스테을 하다보니, 기존의 내가 사용하던 Vanilla JS 와 css 을 이용한 프론트엔트 작업보다는 React 를 배워두는게 좋을 거 같아 입사전 심심할겸 React 를 만져 보고 있다..

React 란?

Front-end 개발을 목적으로 하는 프레임워크.
동적 사용자 인터페이스를 만들기 위해 Facebook에서 2011 년에 만든 오픈 소스 JavaScript 라이브러리
데이터 변경이 잦은 복잡하고, 규모가 큰 웹 애플리케이션에 적합하다.
Angular 보다 배우기 쉽다고 한다.
Virtual Dom을 사용한다.
페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스, MS 등 에서 사용

React 시작하기!

기존적으로 node 가 깔려 있어야 한다.

$ npm install -g create-react-app
$ create-react-app my-app

npm 으로 react 를 다운받아주고,
create-react-app my-app 을 통해 새로운 프로젝트를 생성한다.

한 1~2분 정도 걸렸던 것 같다. 차분히 기다리기

프로젝트 구조 설명

src 디렉토리는 애플리케이션의 소스 코드가 있는 곳으로서, 가장 많은 시간을 보낼 곳입니다.
public 디렉토리는 앱을 개발하는 동안 브라우저가 읽을 파일들을 가지고 있습니다; 이들 중 가장 중요한 것은 index.html 입니다. React는 코드를 이 html 파일에 주입하여 브라우저가 코드를 실행할 수 있게 합니다. create-react-app function에 도움이 되는 다른 마크업도 있기 때문에, 무엇을 하는지 모른다면 함부로 편집하지 않도록 주의하세요. 애플리케이션의 타이틀에 반영되도록 index.html 파일의 요소 안의 텍스트를 바꿔야 합니다. 정확한 페이지 타이틀은 접근성을 위해 중요하니까요!
public 디렉토리 또한 앱의 프로덕션 버전을 빌드하고 배포할 때 퍼블리시 됩니다. 이 튜토리얼에서는 배포에 대해 다루지 않지만, Deploying our app (en-US) 튜토리얼에 기술된 것과 비슷한 해결책을 사용할 수 있을 겁니다.
package.json 파일은 Node.js/npm가 프로젝트를 조직하기 위해 사용하는, 프로젝트에 관련한 정보를 포함하고 있습니다. 이 파일은 React 애플리케이션에 유일하지 않은데요; create-react-app이 이 파일을 수정합니다.

사용해 보기

import 하는 부분은 nest 에서 사용하는 구조랑 비슷 한것 같다.

import logo from './logo.svg';
import './App.css';
import Button from './Button';

함수안에서 변수를 통해서 텍스트 출력 또한 가능하다, 후에 api 사용시 편리한 이점이 될 것 같다

  function App() {
  const testText = '변수로 텍스트 출력하기'
  return (
    <div className="App">
      <header className="App-header">
        <p>
        { testText }
        </p>
       < Button />
      </header>
    </div>
  );
}

또한 다른 js 파일을 만들어 import 해와서 사용도 가능하며, porps 를 이용한 text 변경또한 가능하다.

export default class Button extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "변경 전 텍스트",
    };
  }

  changeText = () => {
    this.setState({
      text: "변경 성공!",
    });
  };

  render() {
    return (
      <div>
        <h1>{this.state.text}</h1>
        <button onClick={this.changeText}>버튼</button>
      </div>
    );
  }
}

Props 는 뭐고 State 는 뭐야?

리액트에서는 '컴포넌트'라는 구성단위로 프론트 개발을 하게 됩니다. 컴포넌트는 구성요소라는 뜻인데, 화면을 구성하는 요소들을 각각 만들고 그것을 하나로 합쳐 하나의 페이지가 되는 형식입니다.
이 컴포넌트 또한 작게 쪼개서 작은 부분을 합쳐 하나의 컴포넌트로 만들 수 있습니다. 하나의 컴포넌트 안에서 쪼개고 쪼개기를 반복하면 하나의 작은 tree 구조처럼 될 수 있습니다. 큰 요소 안에 작은 요소가 있으니 부모 자식의 관계가 형성될 수있는 것이죠.

Props

props는 property의 약자로, 부모에게 받아온 데이터입니다. 리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없습니다. 따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에있는 값을 꺼내서 사용할수만 있습니다.

State

state는 사용자(클라이언트)와 더욱 dynamic 한 통신을 위해 만들어졌습니다. state는 컴포넌트의 특정 상태를 기억하여 화면에 반영하고, 상태가 사용자에 의해 변경되면 다시 화면이 변경되는 기능을 하기위해 존재는 객체입니다.
state 객체를 사용하기 위해서는 부모를 상속받는 class를 생성하여 생성자로 사용해야 합니다.