React.js_리액트

React.js 란?

" 사용자 인터베이스를 만들기 위한 JavaScript 라이브러리 "

 

현재와 같이 유저들과 수많은 인터액션이 일어나는 인터넷 페이지에서 불편한 부분을 줄이고 훨씬 더 효율적으로 운영하고 관리하기 위해서 만들어진 프론트엔드 라이브러리다. 웹상에서 돔의 상태변화가 주기적으로 또는 셀 수 있을 만큼 일어난다면 리액트를 쓰지 않고도 자바스크립트만을 이용해 인터페이스를 만들어 줄 수있다. 하지만 무수히 많은 클릭과 동적인 상태변화를 요구하는 지금은 그 많은 상태들을 관리하기 쉬운 상태로 쪼개놓고 필요한 부분만을 쉽고 편하게 관리하게 만들어 주는게 바로 리액트다. 우리가 많이 사용하는 페이스북의 개발자들이 만든 라이브러리이고 굵직굵직한 기업에서도 많이 사용하고 있어 넓은 생태계속에서 빠르게 성장하는 핫한 도구이다.

 

리액트 말고도 뷰, 앵귤러와 같은 프론트엔드 라이브러리들이 존재하지만 오늘은 리액트만을 다룰 것이다.

 

 리액트의 특징 중 하나는 바로 컴포넌트(Component)이다. 마치 자동차의 부품 하나하나를 말한다. 각각의 부품을 따로따로 관리해주면 자동차 전체를 생각하기보다 문제가 있거나 변화가 필요한 부분, 즉, 부품이 들어갈 부분만 신경쓰면 되기 때문에 직관적이고 재사용하기에 편리하게 만들어졌다. 또 하나의 특징은 리액트는 단방향으로 데이터가 흘러간다. 일방통행이기 때문에 흐름을 읽는데 어려움이 적다.

 

props(Properties)

 리액트의 컨셉 중 중요한 몇가지만 알아보자.

먼저 props는 위에서도 언급했듯 데이터의 전달이 상위 컴포넌트에서 하위 컴포넌트로 전달되는데 이렇게 전달되는 데이터가 바로 props이다. 그렇기 때문에 하위 컴포넌트는 상위 컴포넌트로부터 받은 데이터를 필요한 부분에 사용만 할 수  있을뿐 변경할 수는 없다.(Read-only)

상위 컴포넌트에서는 변수를 선언하고 값을 지정하듯 데이터를 넣어주면 하위 컴포넌트에서는 props라는 통일된 변수로 데이터를 가져오게 된다. 예를 들어 name이라는 값을 지정해 주면 하위 컴포넌트에서는 props.name으로 데이터를 받게 된다.

 

state

 State는 말 그대로 상태를 말한다. 각각의 컴포넌트에서 갖는 상태를 말해주며 객체 형태로 보관하고 관리한다. 컴포넌트의 상태가 필요하다면 컴포넌트는 class로 작성되어야 한다. 리액트에서는 ES6문법을 쓰고 있고 함수로 작성될 수도 있지만 그렇게 되면 함수 내에서는 state를 가질 수 없다. 물론 업데이트된 버전에서는 함수 외부에서 지정된 함수의 state를 만들어주고 불러와 사용할 수 있는데 익숙한 방법을 사용하면 될것 같다. 이렇게 저장된 state는 메소드로만 변경이 가능하다. .forceUpdate()라는 함수를 쓰면 강제적으로 변환이 가능하긴 하지만 시스템상 비효율적이고 추천되지 않는다. state를 변경하는 메소드는 .setState = ({})를 사용할 수 있다. 여기서 중요한 점은 state에 변경이 일어나면 render()함수가 다시 실행된다는 것을 알아두자.

 

Life Cycle

 리액트는 컴포넌트로 구성되어 있다고 했는데 이 컴포넌트를 하나의 라이프로 보고 컴포넌트 하나가 생성되고, 업데이트되고, 사라지는 과정속에서 각 단계의 전 후로 각각의 특정 메소드를 실행한다.

컴포넌트 생성 -> constructor() -> render() -> componentDidMount()

컴포넌트 업데이트 -> state update -> render() -> compoenentDidMount()

각각의 단계마다 원하는 동작들을 구성해서 적절히 활용하면 다이나믹한 웹페이지, 웹앱을 만들 수 있다. 이 life cycle 메소드들은 class로 작성된 컴포넌트에서만 실행되니 각각의 컴포넌트의 형태에도 신경을 써야한다.