리액트에 대해 간략하게 알아보자.

박동건·2020년 1월 20일
0

React

목록 보기
1/1

React? 리액트?

React는 페이스북이 만든 UI Component를 만들기 위한 자바스크립트 라이브러리입니다.

현재 AngularJS, Vue.js와 함께 프론트 프레임워크 3대장이라고 불립니다.

리액트의 특징은 ‘MVC(Model View Controller)’ 패턴에서 ‘V(View)’에만 집중하고 있는 점이다.

여기서 말하는 V란 데이터를 화면에 표현하는 계층입니다.

그렇다면 왜 리액트를 사용하고 인기가 많은가?

요즘의 웹은 정적이고 단순한 페이지가 아닙니다. 웹앱 혹은 웹 어플리케이션이라 불릴 정도로 복잡하고 동적인데 이런 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생깁니다.

만약 프로젝트 규모가 크고 다양한 UI와 상호작용이 필요하다면 DOM 요소 하나하나를 직접 관리하는 것은 힘든 일이 될 것입니다. 또, 복잡하게 늘어진 코드를 리팩토링 하는 것도 점점 힘들게 되죠.

그래서 리액트는 DOM 조작이 브라우저에 엄청 무리를 주기 때문에 Virtual DOM을 만들어 달라진 부분만 비교해 업데이트 합니다.

Virtual DOM?

https://www.youtube.com/watch?v=muc2ZF0QIO4

1. Component

컴포넌트는 개념적으로 props를 input으로 하고, UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수입니다.

UI를 재사용할 수 있고, 독립적인 단위로 쪼개어 생각할 수 있게 합니다.

컴포넌트는 각 프로세스가 진행될 때에 따라 life cycle 함수로 불리는 특별한 함수가 실행됩니다.

개발자는 이를 재정의하여 컴포넌트를 제어하게 됩니다.

2. props 와 state

React는 데이터가 부모 컴포넌트에서 자식컴포넌트로 데이터흐름이 이루어지는 단방향 데이터흐름이 특징입니다.

부모 객체는 자식객체에 props 값을 전달하며, props 값을 받은 자식객체는 이에 관한 부분들을
렌더링 하며, state라는 자체 값을 포함하여 데이터를 변경해 주고, 다시 렌더링 해줄 수 있습니다.

2-1. props

props는 프로퍼티의 줄임말입니다. props는 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터입니다.

컴포넌트 내에서 데이터가 보관되면, 이 데이터는 수정되지 않고 보존되어야 하는 법칙이 있습니다.

만약에 props의 값을 변경하고자 할 때에는 컴포넌트 내부가 아닌, 부모 컴포넌트에서 이에 대한 부분이 변경되어야 합니다.

실제로 사용하는 컴포넌트 내에서 props의 변경은 원칙적으로 금지되어 있습니다.

props를 쉽게 이해하는 방법 중 한 가지는 함수와 비교하는 것이라고 합니다.

function exapmle(parm1,parm2) {
  // TO DO :
}

위의 자바스크립트 코드에서 example 라는 함수는 parm1,parm2 두개의 매개변수를 가지고 있습니다.

import React from 'react';

const Example = (props) => {
  return (
    <div>
      user: {props.name}
      age: {props.age}
    </div>
   );
}

export default Example

위의 리액트 컴포넌트에서 매개변수 역할을 하는 것이 바로 props 라고 할 수 있습니다.

2-2. state

state는 컴포넌트 내부에 존재하고 있기 때문에, 상태값 변경이 가능합니다.

주의할 점은 반드시 setState()를 통해 변경해야 합니다. setState()가 호출되어야 rerender되기 때문입니다.

++ 조만간 코드와 내용을 추가하겠습니다. 😋😋😋

참고문서

  1. https://medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818

  2. https://trustyoo86.github.io/react/2017/11/18/props-state-react.html

  3. https://velog.io/@devjeon1358/React-Props-State

profile
박레고의 개발 블로그

0개의 댓글