React Component , props , state 란?

소스코드를 보면서 컴포넌트에 관련 기능을 설명하겠습니다.

 

[리액트 기본 컴포넌트 형식]

 

"react"라는 자바스크립트 라이브러리에서 

React 기능과, Component 기능을 가져옵니다.

 

이때 중괄호 { } 안에 Component가 있는 것을 보실 수 있는데요.
중괄호 { } 를 사용하는 이유는 export 할때

하나의 파일에는 하나의 default(기본)값만 가질 수 있기때문입니다. 그래서 React는 중괄호를 쓰지않아도 가져올 수 있지만
그 외의 모듈을 import 할때 명시적으로 어떠한 것을 쓰겠다라고 중괄호 { } 안에 적어줍니다.

 

★ 모듈이란

재사용 가능한 단위(함수,클래스,객체)들을

타 프로그램들에서 활용할 목적으로 분리한것

 

14번 라인보겠습니다.

App 이라는 클래스에 Component 를 확장(extends) 시켜서 사용합니다.

render() 메소드를 사용해서 return값에

클라이언트에게 보여줄 것을 담게 됩니다.

 

 

 

4번 라인의 render() 메서드는 랜더링을 해준다는 의미의 메서드입니다.

★랜더링이란? 클라이언트(사용자)에서 서버에 파일을 받아 브라우저에 뿌려주는 과정이라고 볼 수 있습니다.

 

18번 라인은 보시면 제가(개발자) 정의한 서브젝트 태그가 사용되었는데요.
이 서브젝트 태그는 3번라인의 서브젝트 클래스를 태그로 정의한 것입니다.

 

그렇게 되면 클라이언트(브라우저)에는 제가 정의한 태그는 보이지 않고
7번라인에서 정의한 헤더태그부터 확인 할 수 있습니다.

 

이렇게 컴포넌트란 기능 단위로 재사용이 가능하도록 구조화 시키는 것 이라고 할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

이번에는 컴포넌트 내에서 사용하는 properties 인 Props 객체에 대해 말씀 드리겠습니다. 

프로퍼티란 객체 내부의 속성을 의미합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

서브젝트 태그의

title과 sub 속성에 값을 입력하고,

그 값이 필요한 자식객체인 서브젝트 클래스에서 this.props.속성명으로 호출하여 값을 렌더링 합니다.

 

 

 

 

 

 

 

 

 

그럼 제가 서브젝트 태그에 Props를 

정의한 만큼 보여주게 됩니다.

 

 

 

 

 

 

 

 

 

 

 

이번에는 state를 보겠습니다.

state 쓰는 법은 component 와 props 작성방법과 큰 틀은 비슷합니다.
클래스 명 선언하고 컴포넌트를 확장받고
렌더 메서드쓰고 화면에 표시할 내용 리턴안에 넣습니다.

 

 

 

 

 

 

 

 

 

 

 

추가된 부분은 생성자부분입니다.

(14번라인)
생성자를 통해 props객체를 만들고 super를 통해 자식객체의 props를 

사용하겠다고 선언을 해주어야 this.state로 접근 가능합니다.

 

이렇게 state를 통해 데이터를 넘겨주고 setState 함수 를 통해 비동기방식(실시간데이터 변동)으로 데이터를 변경할 수 있습니다.

 

 

 

 

 

 

최종적으로 정리하자면 리액트를 통해 소스코드를 컴포넌트 단위로 구조화 시키고,

그 컴포넌트를 활용하기 위해

Props 를 통해 데이터를 전달하며, State를 통해 데이터를 수정합니다.