컴포넌트란?
"컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
-> 독립적 존재라는 말
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.
-> input과 output이 있다는 말
"props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다."
리액트 컴포넌트를 표현하는 두 가지 방법
1. 클래스형 컴포넌트
2. 함수형 컴포넌트
// <함수형 컴포넌트>
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
return <div>hello</div>
}두 가지 모두 기능상으로는 동일하지만, 공식 홈페이지에서는 '함수형 컴포넌트'를 사용하기를 권장하고 있다.
결론적으로 리액트 세계에서 말하는 컴포넌트(블럭)는 '함수'이다. 누군가가 "컴포넌트를 만들어 보세요"라고 한다면 리액트 개발자는 html을 return하는 함수를 만들면 된다.
컴포넌트 보는 방법
컴포넌트는 영역을 나누어서 보면 조금 더 쉽다.
최상단과 최하단 : 내가 외부에서 import할 컴포넌트를 명시하는 부분이 최상단, 현 컴포넌트를 외부로 export한다는 명시를 하는 부분이 최하단이다.
함수 선언부 중괄호 다음부터 return 앞까지 : 자바스크립트 코드를 쓸 수 있는 영역이다.
return 아래부터 함수 끝까지 : 화면에 랜더링 될 JSX를 쓰는 부분이다.
주의
- 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다.
- 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.
- JSX를 사용하는 부분에서 JS코드를 사용할 때는 {} 안에서만 사용한다.
실습
<script>
// src/App.js
function App() {
const handleClick = () => {
alert('클릭!');
};
return (
<div
style={{
height: '100vh',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<span>이것은 내가 만든 App컴포넌트 입니다</span>
<button onClick={handleClick}>클릭!</button>
</div>
);
}
export default App;
</scirpt>- JSX문법에 따르면 style 적용도 JS코드를 사용할 때처럼 "{}"를 사용하고, 그 안에 style에 대한 key-value들을 포함하고 있는 객체를 넣어주면 된다.
- 태그에 대한 프로퍼티로 onClick을 설정하고, 그 안에도 JS코드를 사용해야 하기 때문에 "{}" 안에 클릭 이벤트에 따라 실행시킬 함수를 넣어준다.
