[ React ] React 와 React Component 란?

 

🚩 React 란?

React.js 는 SPA( Single Page Application ) 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의
독립적인 블록을 이용한 개발 방법이다.

✅ SPA .....  MPA ?

Single Page Application, 한 개의 페이지로 이루어진 애플리케이션 이라는 말이다.
Multi Page Application 과는 상반된 개념이다.

기존 MPA 의 문제점은 좋아요를 눌렀는데 웹사이트가 다시 로딩을 해야한다거나, 요즘 같이 리렌더링( re-rendering )이 많은 상황에선 계속해서 깜빡거릴 수 밖에 없다.

반면 SPA는 이름 그대로 딱 한개의 페이지로 구성된 웹 앱이다.
서버에 1회 리소스를 요청하며, 그 이후에 무언가가 필요할 때 데이터만 받아와서 기존 페이지를 '수정' 해주는 방식으로 화면을 바꿔준다. 사용자 입장에서 리렌더링을 위한 깜빡임이 없으니 굉장히 자연스러운 UX( User Experience) 를 구현할 수 있다.

SPA 에도 단점이 있다면, SEO( Search Engine Organization )에 약하다는 점이다.
SEO를 위해서는 HTML 페이지 전체가 필요한데, SPA는 HTML에서 내용을 작성하는게 아닌, app.js 와 같은 곳에서 작성해 HTML과 연결해 보여주는 방식이기에 HTML 파일의 내용이 없어서 그렇다. 

React 의 개발 방법

 

리액트는 [ 컴포넌트 = 벽돌 ] 벽돌을 쌓아 집을 짓는 느낌이다.

헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트를 만들어서 벽돌을 쌓아 올리듯이 개발하는 것이다.

위에서 말한 SPA 기반 사이트에서 변경이 일어난다면 컴포넌트 단위로 변경사항을 반영하기에,

깜빡임이 없는 것이다( 이것을 렌더링이라고 한다 ).

 

🚩 React Component 란?

개념적으로 컴포넌트는 Javascript 함수와 유사하다.
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
"props" 라는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 

 

 

리액트 컴포넌트를 표현하는 2가지 방법이다.

1. 함수형 컴포넌트

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

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

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

2. 클래스형 컴포넌트

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

 

2가지 모두 기능은 동일하나, 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장한다.

그리고 함수형 컴포넌트가 작성하기 쉬웠다.

 

✅ 결론적으로 리액트 세계에서 말하는 컴포넌트(블럭)은 함수다 !

누군가 우리에게 " 컴포넌트를 만들어봐 " 라고 한다면 우리는 html을 return 하는 함수를 만들면 된다 !

 

 

 

Component 를 보는 방법이다.

컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, export default 를 통해 내가 만든 컴포넌트를 밖으로 보낼 수 있다.

컴포넌트 안에서는 자바스크립를 쓸 수 있는 영역이 있다. 컴포넌트 안에서 어떤 자바스크립트 코드를 작성하고 싶다면 사진에 보이는 자바스크립트를 쓸 수 있는 영역에다가 작성하면 된다.

그리고 return을 기준으로 아랫부분에서는 HTML( 정확히 말하면 JSX )을 작성할 수 있다. 여기에 작성한 html 코드와 값들이 화면에 보여진다.

❗ 주의해야할 점

컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야한다.
폴더는 소문자로 시작하는 카멜 케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.