ReactJS 의 Component에 대해서 정리해 보겠습니다.

오늘은 ReactJS의 Component에 대해서 정리해 보겠습니다.

참고로 React에 대해서 처음 다루기 시작한 

저번 글은 아래링크를 참조해 주세요.

>>>ReactJS 그리고 JSX를 시작해보자<<<

1. Component

컴포넌트는 재사용할 수 있는 코드들의 모음을 애기한다고 할 수 있겠는데요.

컴포넌트를 만들 때 알아야 할 것은 다음과 같습니다.

첫째는, 컴포넌트를 생성하는 컴포넌트 클래스를 만들기 위해서,

Base클래스로 'React.Component' 클래스를 사용한다는 점이구요.

둘째는, 클래스에서 render() 메소드를 구현해야 하는데,

return값으로는 UI를 표현하는 JSX구문이 들어가야 한다는 것 입니다.

return값에 JSX가 여러개의 태그로 구성되어 있다면,

괄호'()'를 추가해 넣어주면 됩니다. 이 때에도 반드시 태그의 가장 바깥쪽에는 하나의 태그만 존재해야 합니다.

아래와 같이 return을 해주기 전에 미리 연산을 수행하는 것도 가능합니다.

이제 컴포넌트를 만들었으니, UI를 그릴 수 있도록 사용을 해야하는데요.

부르는 형식은 JSX에서 클로징이 없는 태그를 쓸때처럼,

아래와 같은 형식을 취하면 됩니다.

<Component 이름 />

예를 들어, TestClass를 사용해서 root에 그리도록 하려면 아래와 같이 하면 됩니다.

2. this 그리고 getter메소드

Component에서는 내부에 함수를 정의하고,

render메소드의 return안에서 this로 내부 함수에 접근할 수 있는데요.

아래와 같이 코딩하면, 이벤트 핸들러인 goAlert가 이미지 클릭시 호출됩니다.

Component안에서 JavaScript의 getter메소드를 이용하는 방법도 있는데요.

아래와 같이 할 수 있습니다.

이상으로 Component에 대해서 정리해 보았습니다.

ReactJS의 핵심개념이므로 손에 잘 익혀놓아야 겠네요.