컴포넌트란?

안녕하세요! 오랜만입니다!

한동안 리액트를 공부했는데 그에 관한 내용을 차차 적으려고합니다.

 

저는 리액트를 사용자가 정의한 태그를 만드는 기술이라고 생각합니다.

이때 사용자 정의 태그를 컴포넌트(component)라고 부릅니다.

리액트의 꽃이라고 생각하는 컴포넌트에 대해 간단히 얘기를 해보면

컴포넌트란?

리액트는 화면에서 UI요소를 구분할때 컴포넌트 라는 단위를 사용합니다.

컴포넌트에는 함수 컴포넌트와 클래스 컴포넌트 두종류가 있는데 여기선 함수 컴포넌트에 대해서만 얘기하겠습니다.

 

함수 컴포넌트란?

함수 컴포넌트는 말그대로 자바스크립트의 함수(Function)를 기반으로 한 컴포넌트 입니다.

Function을 사용해 정의하여 return값이 UI가 됩니다.

화살표 문법으로도 작성할수있다.

그리고 주의 해야 할 점은 컴포넌트의 이름은 반드시 대문자로 시작해야 합니다.

그 이유는 React는 소문자로 시작하는 이름의 컴포넌트를 <h1>이나 <div>와 같은 정규 HTML 태그로 취급하기 때문에 오류가 발생하지 않도록 꼭 첫글자는 대문자로 적어주도록 합시다.

 

글을 마치며,

조각 조각 (component)들을 합쳐 하나의 완성품을 만드는게 재밌게 느꼈던 리액트 입니다.

오류도 많이 발생하기도 하지만 다들 재밌게 리액트 하셨으면 좋겠습니다!