챕터3에서는 리액트의 기초를 실습을 통해서 배워보자~

컴포넌트란 무엇일까?

컴포넌트란 쉽게 말하면 html,css,js를 조합한 것이다. 이런 컴포넌트를 합치고 합치면 우리가 만들고자 하는 서비스, 즉 사용자 인터페이스를 만들 수 있다.

<aside> 💡 인터페이스가 모에용 인터페이스란 두 물체의 중간 매개체라고 생각하면 된다. 두 물체가 소통을 원활하게 할 수 있도록 도와준다.

</aside>

컴포넌트를 왜 채택한거야?

리액트에서 컴포넌트를 채택한 이유는 재사용성과 코드 분산이다.

컴포넌트를 사용하면 굳이 코드를 여러번 쓰지 않고도 똑같은 코드를 손쉽게 재사용할 수 있다.

//component는 재사용성이 뛰어나는 구먼
<Component />
<Component />
...

또한 코드 분산 측면에서 매우 유용하다. 코드를 작은 조각으로 나누게 되면 한 개의 코드 조각의 역할이 분명해져 코드의 역할을 더 뚜렷해진다. 역할이 명확한 코드들을 가지고 좀 더 수월하게 사용자 인터페이스를 만들 수 있다.

<SignIn /> //얘는 "로그인 기능"을 하는 컴포넌트
<SignUp /> //얘는 "회원가입"을 하는 컴포넌트

리액트는 “선언적 방식”으로 작성된다!

기존의 자바스크립트 문법을 생각해보자. 요소 하나하나를 만들고 자식요소를 만들어주고 스타일을 변경하는 그 복잡한 모든 과정들이 명령형 프로그래밍으로 작성이 된다.