리액트에서의 컴포넌트는 앱을 이루는 최소한의 단위이다.
웹 사이트를 보면 반복된 요소들이 굉장히 많은 것을 알 수 있다.
이러한 것들을 컴포넌트화 한다면, 상황에 따라 컨텐츠만 다르게 넘기면서 일관적인 UI를 보여줄 수 있을 것이다.
이제는 컴포넌트 기반으로 개발하는 것이 너무나도 당연해졌다.
리액트 개발을 한다는 것은 컴포넌트를 개발하는 것과 동일하다고 말할 수 있을 정도이다.
컴포넌트는 자바스크립트의 함수와 유사하다.
const mainTitle = <h1>내가 좋아하는 과일</h1>;
const main = (
<div class='main'>
<img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
<button>🤍</button>
</div>
);
const likeTitle = <h1>❤️</h1>;
const like = <ul class='like'></ul>;
const app = (
<div>
{mainTitle}
{main}
{likeTitle}
{like}
</div>
);
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(app, 여기다가그려);
이렇게 작성된 자바스크립트 코드를 리액트의 컴포넌트로 바꾸려면 어떻게 해야 할까?
먼저, main
부터 바꾸어 볼까?!
<script type="text/babel">
const Main = () => {
return(
<div class='main'>
<img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
<button>🤍</button>
</div>
);
};
</script>
어떤 것이 바뀌었나 보자면,
1. main
에서 Main
으로 변수명의 첫글자가 대문자로 바뀜.
2. 함수처럼 변했다? return 값에 태그들이 들어갔다.
컴포넌트의 이름은 꼭 첫글자가 대문자여야 한다.
소문자로 시작할 경우 리액트는 DOM 태그로 처리한다.
const MainTitle = () => {
return <h1>내가 좋아하는 과일</h1>;
};
const Main = () => {
return(
<div class='main'>
<img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
<button>🤍</button>
</div>
);
};
const LikeTitle = () => {
return <h1>❤️</h1>;
};
const Like = () => {
return <ul class='like'></ul>;
};
이렇게 전부 컴포넌트로 바꾸었다!
const MainTitle = () => {
return <h1>내가 좋아하는 과일</h1>;
};
const Main = () => {
return(
<div class='main'>
<img src='https://src.hidoc.co.kr/image/lib/2021/9/17/1631863503853_0.jpg' alt='사과 1개' />
<button>🤍</button>
</div>
);
};
const LikeTitle = () => {
return <h1>❤️</h1>;
};
const Like = () => {
return <ul class='like'></ul>;
};
const app = (
<div>
<MainTitle />
<Main />
<LikeTitle />
<Like />
</div>
);
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(app, 여기다가그려);
<Main />
이렇게 태그처럼 컴포넌트를 사용할 수 있다.
일단, 고양이에게 인사를 하는Welcome
컴포넌트를 만들어 보았다.
function Welcome() {
return <h1>Hello, cat!</h1>;
}
const app = (
<div>
<Welcome />
</div>
);
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(app, 여기다가그려);
| 실행화면
그런데 갑자기 강아지에게 인사를 하고 싶어진다면, 수많은 컴포넌트 중 Welcome
컴포넌트를 찾아 cat을 지우고 dog라고 고쳐야 한다.
꽤 귀찮은 일이다... 이럴 때! props를 사용하는 것이다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const app = (
<div>
<Welcome name="dog" />
<Welcome name="cat" />
</div>
);
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(app, 여기다가그려);
| 실행화면
이렇게 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값으로, 어떤 값을 컴포넌트에게 전달할 때 사용한다.
이때 컴포넌트의 자체 props를 수정해서는 안 된다!
(props.name = 1;
이딴 거 안 된다는 뜻)
props를 통해 부모 컴포넌트에서 자식 컴포넌트로 어떻게 넘어오는 지 알아보려고 console.log(props);
해보았다.
오 Object
로 넘어와서 name을 선택한 거였구나!
그러면, props.name
으로 굳이 하지 않고 객체를 풀어서 {name}
으로 쓸 수 있을 것 같다.
function Welcome({ name }) {
return <h1>Hello, { name }</h1>;
}
const app = (
<div>
<Welcome name="dog" />
<Welcome name="cat" />
</div>
);
const 여기다가그려 = document.querySelector("#app");
ReactDOM.render(app, 여기다가그려);
| 실행화면
props.name
으로 했을 때와 동일하게 동작하는 것을 알 수 있다.
만들면서 배우는 리액트: 기초
위 강의를 참고하여 정리했습니다!