React

React

React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

React는 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용될 수 있다.

React는 페이스북 소프트웨어 엔지니어 Jordan Walke가 개발했으며 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다고 합니다.

---

개념

1. 방향성
2. JSX
3. Component, props
4. 가상 DOM
5. 생명주기

---

방향성

속성과의 단방향 데이터 바인딩

보통 props라 불리는 속성들은 부모 컴포넌트로부터 자식 컴포넌트에 전달된다. 컴포넌트들은 props을 하나의 불변 값(자바스크립트 객체)들로 받는다.

 

JSX

JSX는 XML같은 문법을 사용하는 ECMAScript의 확장입니다. HTML과 모습이 비슷해 보이는 JSX는 수많은 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공합니다. 리액트 컴포넌트들은 일반적으로 JSX를 사용하여 작성되지만 꼭 그렇게 할 필요는 없습니다.

// JSX 방법
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// 기본 방법
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

JSX로 작성된 코드는 웹 브라우저가 인식할 수 있기 전에 바벨과 같은 도구를 이용한 변환이 필요합니다.

React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

React 공식 홈페이지

 

Component, props

Component

• React를 사용할 때는 컴포넌트를 class 또는 함수로 정의할 수 있습니다.
• 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눕니다.
• 컴포넌트는 JavaScript 함수와 유사하고 props라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React 엘리먼트를 반환한다.

//함수 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

//class 컴포넌트
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

함수 컴포넌트는 props로 받을 객체 인자를 정의하고, JSX를 반환하는 것으로 기본 형태를 갖춥니다.

함수형 컴포넌트에서는 return문에서 JSX를 반환할 수 있습니다.

 

클래스 컴포넌트는 React.Component 클래스를 상속 받은 것으로 기본 형태를 갖춥니다.

클래스형 컴포넌트는 return문을 사용할 수 없으므로 render()함수를 이용하여 JSX를 반환합니다.

 

props

• 컴포넌트는, 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환한다. 이때 props는 속성을 나타내는 데이터입니다.
• props는 컴포넌트에서 컴포넌트로 전달하는 데이터입니다. 컴포넌트의 속성으로, 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정 가능합니다.
• props는 읽기 전용이므로 컴포넌트의 내부에서 props를 수정해서는 안됩니다. 이런 함수들은 순수 함수라고 호칭합니다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문입니다.
• props를 받는 함수형 컴포넌트에 인자를 정의하면, props를 속성으로 가지는 객체 Object가 해당인자로 전달됩니다.

<Cat name="boris" age={5} />
<Cat name="Naul" age={7} />

//함수형 
function Cat(props){
	return (
    	<div>{props.name}</div>
        <div>{props.age}</div>
    )
}

//class형
Class Cat extends React.Component {
	render() {
    	return(
        	<div>{this.props.name}</div>
            <div>{this.props.age}</div>
        )
}

 

가상 DOM

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

이 접근방식이 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.

“virtual DOM”은 특정 기술이라기보다는 패턴에 가깝기 때문에 사람들마다 의미하는 바가 다릅니다. React의 세계에서 “virtual DOM”이라는 용어는 보통 사용자 인터페이스를 나타내는 객체이기 때문에 React elements와 연관됩니다. 그러나 React는 컴포넌트 트리에 대한 추가 정보를 포함하기 위해 “fibers”라는 내부 객체를 사용합니다. 또한 React에서 “virtual DOM” 구현의 일부로 간주할 수 있습니다.

 

생명주기

 

componentDidMount

componentDidMount()는 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출됩니다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 됩니다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치입니다.

 

componentDidUpdate

componentDidUpdate()는 갱신이 일어난 직후에 호출됩니다. 이 메서드는 최초 렌더링에서는 호출되지 않습니다.

컴포넌트가 갱신되었을 때 DOM을 조작하기 위하여 이 메서드를 활용하면 좋습니다. 또한, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업도 이 메서드에서 이루어지면 됩니다 (가령, props가 변하지 않았다면 네트워크 요청을 보낼 필요가 없습니다).

 

componentWillIUnmount

componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됩니다. 이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행하세요.

이제 컴포넌트는 다시 렌더링되지 않으므로, componentWillUnmount() 내에서 setState()를 호출하면 안 됩니다. 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않습니다.