React.js란?

react.js란, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됐다.

(출처 : https://ko.wikipedia.org/wiki/리액트_(자바스크립트_라이브러리))

 

즉, 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다.

 

(추가)https://duyaan.tistory.com/13

라이브러리 vs 프레임워크

 

React.js의 주요 특징

1. 컴포넌트(Component)

• 컴포넌트란 화면을 이루는 작은 요소들이다.
• 리액트에서는 이러한 컴포넌트들을 조립해서 화면을 구성한다.
• 물론 다른 화면에서 재사용이 가능하다.
• 개념적으로 javascript의 함수와 유사하다. (‘props’라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react element를 반환한다.)
• '함수형 컴포넌트'가 있고, '클래스형 컴포넌트'가 있다.

함수형 컴포넌트 예시)

function Welcome(props){
	return <h1>Hello, {props.name}</h1>;
}

클래스형 컴포넌트 예시)

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

 

2. 단방향 데이터 흐름(one-way data flow)

• 단방향 바인딩(one-way binding)
• 리액트에서는 데이터가 한 방향으로만 흐르는 흐름을 가진다.
• 양방향 바인딩의 경우엔 코드의 양이 줄어드는 대신에, 프로그램의 규모가 커질수록 데이터의 흐름을 추적하기 힘든 반면, 단방향 바인딩은 복잡해도 데이터 흐름을 파악할 수 있어서 데이터 흐름의 이해와 관리에 용이하다.
• 보통 props라 불리는 속성들이 부모 컴포넌트로부터 전달된다.
• 컴포넌트들은 props을 하나의 불변의 값(javascript의 객체)들로 받는다.

 

3. props와 state

• props와 state는 일반 javascript의 객체로서, 리액트에서 데이터를 다룰 때 사용되는 개념이다.
• 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가진다.
• props는 함수의 매개변수처럼 컴포넌트에 전달되지만, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리한다.

 

4. 가상 DOM (Virtual DOM Object Model)

 

• 리액트는 가상의 DOM을 만들어 차이를 계산한 다음 브라우저에 표시되는 DOM을 효과적으로 업데이트한다.
• 즉, DOM은 새로운 element가 업데이트된 경우 새로운 DOM을 생성하지만, 가상 DOM은 새로운 element가 업데이트된 경우 새로운 가상 DOM을 생성하여 이전 DOM과의 차이가 있는 부분만 업데이트한다.

 

5. JSX (JavaScript XML)

const element = <h1>Hello, world!</h1>;

• javascript에 xml을 추가하여 확장한 문법이다.
• html과 모습이 비슷해 보이는 JSX는 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다.
• 리액트에서는 일반적으로 JSX를 사용하여 작성되지만, 꼭 그럴 필요는 없다.

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)