[React.js] 리액트 입문하기 _ 리액트(React.js)란?

---

 

지금까지의 포스트와 개인 공부로 JavaScript를 어느정도 기초를 다져놓은 상태라면 라이브러리에 눈을 돌릴때라 생각한다. 이전 포스트에서 말했듯, 지금까지의 JS포스트는 React와 NEXT를 배우기위한 초석이다. 이번 포스팅부터 React.js가 무엇인지를 학습하고, React.js에서 사용되는 JSX(Javascript Syntax eXtension)문법에 대하여 알아보도록 하겠다.

 

리엑트 학습엔 아래 공식 자습서를 활용하자.

자습서: React 시작하기 – React

---

1) 리액트 시작

1.1) 리액트 특징

<출처>https://modulabs.co.kr/blog/react-library/

 

React는 오직 View만 신경쓰는 라이브러리이다. MVC나 MVVM 패턴을 따르는 타 라이브러리와 달리 React는 오로지 V만 이용한다. 때문에 React 코드를 작성함에 있어 HTML에 편의성이 추가된 느낌을 받을것이다. 자유도가 괸장히 높기 때문에 코드를 작성하는 프로그래머의 성향에 따라 수많은 방향성을 지닐 수 있다.

 

*) MVC? MVVM?

먼저 MVC는 Model-View-Controller로 역할을 나눠 구성하는 패턴이다. 진입점인 Controller의 처리를 토대로 Model에서 데이터를 관리, 이후 View에서 데이터 전송이 이루어 진다. 때문에 클라이언트(사용자)의 요청을 받는 서버(Server)에서 사용된다.

 

MVVM은 Model-View-ViewModel로 역할을 나눠 구성하는 패턴이다. 진입점인 View에서 나오는 이벤트를 토대로 ViewModel에서 데이터 관리, Model은 전체적인 데이터를 관리/제어한다. View는 Binding(바인딩)을 통해 ViewModel을 계속 감시하고, 특정 데이터가 변경될 경우 해당 데이터에 Binding된 요소를 업데이트 한다.

때문에 주로 클라이언트(사용자)가 직접 조작하는 부분(FrontEnd)에서 사용된다.

 

간단히 말해서 클라이언트는 이벤트에 대한 즉각 처리가 필요하고, 서버는 요청에 대한 반환을 주로 작업하기 때문에 각각 MVC와 MVVM을 사용하는것이다.

 

1.1.1) Virtual DOM

React는 Virtual DOM을 사용한다. 여기서 DOM이란 Document Object Model의 약자이다. 일반적인 DOM방식이라면 DOM 변화가 일어날 때 처리 속도가 느려지는 단점이 있다. 이것을 해결하기 위해 Virtual DOM 방식으로 DOM 업데이트를 추상화 하여 DOM을 최소한으로 조작한다.

 

1.1.2) 기타 특징

● View만 담당함.

● 라이브러리, 기능을 직접 구현해야 함.

● 프레임워크와 혼용 가능.

● 작업환경은 Node.js를 사용.(개발 도구 설치 목적)

 

 

 

1.2) JSX

JSX(Javascript Syntax eXtension)는 자바스크립트의 확장형 문법이다. 기존 JS문법보다 보기 쉽고 간결하다는것이 특징이다. 간단한 예제를 보자.

import React from 'react';

function App() {
    return (
        <div>
            <h1>리액트 안녕!</h1>
            <h2>잘 작동하니?</h2>
        </div>

    )
}

export default App;

 

구조를 보면 알수있다시피 기존 JS코드 안에 HTML 태그를 작성하는 형식이다. 작동시 아래와 같이 동작한다.

예제 코드 및 사진은 velog블로그의 @milmilkim 블로그

import React from 'react';

const name = '리액트';
function App() {
  return (
    <>
      <h1>{name} 안녕!</h1>
      <h2>잘 작동하니?</h2>
    </>
  );
}

export default App;

 

그 외에도 이렇게 {}로 감싸 JS의 표현식을 사용할 수 있다. 그 외에도 if문이나 AND(&&) 조건부 렌더링 등을 활용할 수 있다. 자세한 React의 JSX문법 사용법은 아래 블로그를 참고하자.

 

리액트 기초 정리

---

2) Props와 state

Props와 state를 설명하기에 앞서 React를 사용하는 이유인 컴포넌트에 대해 짚고 넘어가야 할것이 있다. 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 이제는 Hooks의 도입으로 함수형 컴포넌트에서 state를 사용할 수 있기 때문에 함수형 컴포넌트 사용이 권장된다는 것만 알고 가자.

import React from 'react';

const MyComonent = () => {
    return <div>뉴 컴포넌트</div>;
};

export default MyComponent;

 

컴포넌트는 위 처럼 작성하고 

import React from 'react';
import MyComponent from './MyComponent';

const MyComonent = () => {
    return <MyComponent>;
};

export default App;

 

이렇게 불러와 사용한다.

 

2.1) Props

Props는 properties의 준말이다. 컴포넌트의 속성을 설정하며, 부모 컴포넌트에서 설정이 가능하다.

import React from 'react';

const MyComponent = (props) => {
  return <div>제 이름은 {props.name}입니다.</div>;
};

export default MyComponent;

 

위와 같이 JSX 내부에서 렌더링을 하고

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
    return <MyComponent name="React" />;
};

export default App;

 

위와 같이 Props를 지정하여 사용한다.

MyComponent.defaultProps = {
    name: '기본 이름'
}

 

이런식으로 기본값을 설정할 수도 있다.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
    return <MyComponent>리액트</MyComponent>;
};

export default App;

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      제 이름은 {props.name}입니다. <br />
      children 값은 {props.children} 입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름',
};

export default MyComponent;

 

이런식으로 코드를 작성했을때 결과를 생각해보면 Props가 무엇인지 이해할 수 있을것이다.

 

마지막으로 Props의 타입들을 정리하고 state로 넘어가겠다.

번호	타입	의미
1	array	배열
2	bool	참/거짓
3	func	함수
4	object	객체
5	string	문자열
6	instanceOf(클래스):	특정 클래스의 인스턴스
7	oneOf(['배열1', '배열2']):	주어진 배열 요소 중 하나
8	oneOfType([React.PropTypes.string, Proptypes.number]):	배열 안의 종류 중 하나
9	any	아무거나

 

2.2) state

state는 함수 내부에서 바뀔 수 있는 값을 의미한다. state값을 바꾸어야 할 때는 setState 또는 useState를 통해 전달받은 세터 함수를 사용해야한다. 단 배열이나 객체를 업데이트 할 때는 객체 사본을 만들고 업데이트 한다. 참고로 함수형 컴포넌트를 만들때는 useState를 사용한다.

 

import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');

  const [color, setColor] = useState('black');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: 'red' }} onClick={() => setColor('red')}>
        빨간색
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        초록색
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        파란색
      </button>
    </div>
  );
};

export default Say;

 

useState를 사용할 때의 예제는 위와 같다. 결과를 생각하면 이해하기 쉬울것이다.

//객체 다루기
const object = { a:1, b:2, c:3 };
const nextObject = { ...object, b: 2}; //사본을 만들어서 b값만 덮어쓰기

// 배열 다루기
const array = [
    { id: 1, value: true},
    { id: 2, value: true},
    { id: 3, value: false}
];
let nextArray = array.concat({id:4}) //새 항목 추가
nextArray.filter(item => item.id !== 2); // id가 2인 항목 제거
nextArray.map(item=> (item.id === 1 ? {...item, value: false} : item)); //id가 1인 항목의 value를 false로 설정

 

배열이나 객체를 업데이트 할 때 사본을 만들어 업데이트 하는 방식 예제이다.

---

이벤트 헨들링이나 DOM, Hooks 등은 이후 포스팅에서 순차적으로 다룰것이며, 모든 React 포스팅이 끝난 시점에서는 예제와 함께 실습을 하고 NEXT.js를 다뤄보도록 하겠다.

---

 

*본 포스팅은 인프런 '이정환'의 '한입 크기로 잘라먹는 리엑트' 강의와 기타 블로그를 보고 정리한 내용임을 알림*