React Component 기초 - React 튜토리얼 1
React 는 Component 시스템으로
전체를 구성하는 방식입니다.
컴퓨터 프로그래밍을 하다보면
Component(컴포넌트)라는 용어가
자주 나옵니다. 이게 엔지니어링에
쓰는 단어라서 처음 들은 사람은
좀 이해가 어려울 수도 있고
element, module, function 등
비슷한 용어가 난무하기 때문에
보통 초보자들 중에 이 용어의 장벽을
뚫지 못하고 포기하는 경우가 많습니다.
컴퓨터공학의 용어들은 대부분 추상적인
근거를 가지고 만들기 때문에
조금 그 뜻을 현실적으로 이해하려고 하면
잘 안되는 것들이 많습니다.
무슨말이냐면 Component는 그대로
Component로 받아들이는게 좋습니다.
객체지향 프로그래밍에서 class를 배우는 것과
비슷할 수도 있는데 어떤 개념을 만들어서
사용하는 것에 불과하기 때문입니다.
거기에 과도한 의미를 부여하면
오히려 이해가 어렵습니다.
다시말하면 React의 Component는
그냥 Component다 라고 이해하면 충분합니다.
설명이 좀 병맛이긴 한데 프레임워크라는게
좀 그렇습니다. 프레임워크라는 단어를
이해하는 것 조차 장벽이기 때문에
프로그래밍이 쉬운 일은 아닙니다.
*******
*******
React는 Single Page Application 시스템입니다.
기존의 웹 응용프로그램은 다수의 파일로
이루어져 있어서 http request 와 response로
파일을 주고받고 클라이언트와 서버가
각자 해야할 일을 분담하는 시스템입니다.
React는 이런 것들을 줄여서 하나의 페이지로
만드는 대신 독립적인 기능을 하는 Component
(클래스나 함수처럼)로 모듈화 했습니다.
단순히 모듈로 만든게 아니라 HTML, CSS,
Javascript가 종합적으로 작동할 수 있도록
절묘하게 만들어 놨기 때문에 오픈소스
커뮤니티에서 광범위하게 받아들였고
현재 가장 많이 쓰이는 프론트엔드
웹프레임워크로 등극합니다.
이 포스팅에서 React Component의
깊은 부분까지 설명하려는 것은 아닙니다.
사실 Component같은 것을 잘 몰라도
React 로 적당한 웹앱을 만드는 것은
가능한데 그게 프레임워크의 목적입니다.
다만 배경 지식없이 Component를
사용하는 방법만을 안다면 그건 좀 한계가
금방올 수 있으니까 관련된 기초를
학습하는게 좋지 않겠나 싶습니다.
Component 만들기
React 최근의 버전에서는 ES6 표준으로
가고 있기 때문에 createClass 메소드가
deprecated되서 class 문법을 사용합니다.
예를 들어서 HelloWorld라는 component는
React.Component 을 extends 하고(상속/합성)
render 메소드를 정의합니다.
class HelloWorld extends React.Component {
render(){
return (
<div>
<h2>Hello React!</h2>
</div>
);
}
}
JSX 문법으로 아래와 같이 표현됩니다.
ReactDOM.render(
<div>
<HelloWorld/>
</div>,
document.querySelector("#container")
);
id가 container인 요소에 render합니다.
class를 사용해서 JSX 소스코드를
조작할 수 있습니다. 이게 무슨 의미인지
이해하려면 객체지향프로그래밍에
대한 지식이 조금 필요할 수 있습니다.
component의 속성을 쓰면 JSX에서
함수처럼 사용할 수 있습니다.
this.props 는 property(속성)입니다.
여러개의 사용자 속성을 만들 수 있습니다.
class HelloWorld extends React.Component {
render(){
return (
<div>
<h2>Hello React! {this.props.myTarget}</h2>
</div>
);
}
}
JSX도 HTML 태그처럼 attribute(속성)
방식으로 값을 넘겨줄 수 있습니다.
React Component가 받아서
rendor 메소드에다 사용합니다.
ReactDOM.render(
<div>
<HelloWorld myTarget="Mr.CodingGak"/>
</div>,
document.querySelector("#container")
);
브라우저에 아래와 같이 출력합니다.
(스타일시트를 적용한 상태이다)
See the Pen react component basic by jayonk (@jayonk) on CodePen.
HelloWorld 라는 Component를 만들어서
그 안의 자식요소 값을 리턴하려면
this.props.children 을 사용합니다.
<HelloWorld> </HelloWorld>의
사이에 있는 모든 요소를 Return하는데
다양한 활용방법이 있습니다.
React는 프레임워크지만 방대하게
응용되서 사용되고 있기 때문에
이 짧은 포스팅에 모든 것을 다루기는
좀 쉽지 않고 기회가 될 때마다
포스팅을 할 예정입니다.
React는 2021년 기준으로 전세계적으로
가장 많이 사용되는 웹 프레임워크입니다.
지금의 추세로 보면 React 점유율이
좀 더 늘어나지 않을까 보고 있습니다.
다른 프레임워크 보다 JQuery가
아직도 34%나 점유하고 있으니까
미래적으로 jQuery가 줄어드는 추세인데
그 부분을 React가 좀더 많이
가져갈 가능성이 있습니다.
Single Page Application 과 Component 개념이
얼마나 오래 지속될지 지금은 알수 없는데
약간 20년전에 자바가 OOP를 들고 나왔을 때와
비슷한 느낌인 것 같기도 합니다.
웹의 미래를 섯불리 예측하는 것은
상상의 자유이지만 지나고 보니 알았다 -
고 고백하는 것은 많은 기회의
손실을 의미할 수도 있습니다.
어쨋든 지금은 제일 핫한 기술임에 틀림없습니다.
개인적으로 자바 스크립트같이
혼돈의 역사를 가진 언어를
잘 다루지 못해서 웹프레임워크는
잘 다주지 않는 편인데 트렌드적으로
좀더 분발해서 React에 대한
포스팅을 더 해야할 것 같습니다.
