개발을 배울 때
가장 어려운 점은 아마 '개념 이해'장벽이 높기 때문이지 않을까.
굉장히 어려웠던 개념 중 하나가 바로
components(컴포넌트) / props (properties 의 줄임. 프롭스. ) 였다.
value 야 어차피 값 이라는 뜻이고
이미 Accounting 때도 많이 봤으니 별로 어려울 게 없었지만
components 와 props/ function 의 관계 + class 등 여간 헷갈리는게 아니었는데
오늘부로 드디어 정리를 할 수 있게 되어 (기쁜마음과 함께)
이 개념적 이해를 잊지 않고자 쓴다.
1. 컴포넌트 파일을 만들어서 불러오기.
리액트는 components를 무한히 만들 수 있고, 또 이것을 무한히 재활용할 수 있다.
components는 어떻게 만들까?
쉽다.
src 폴더에
Snacks.js
라는 아무 의미 없는 연습용 파일을 하나 만든다.
import React from "react";
function Snacks() {
return <h2> My mom gave me a fried-egg. I hated it.</h2>;
}
export default Snacks;엄마가 후라이 계란 준 게 싫었다는 못된 딸
나는 방금 snacks 라는 컴포넌트를 만들었다.
단, 컴포넌트는 대문자로 시작해야한다는 것에 주의하자.
App.js 로 가서 이 컴포넌트를 한 번 작동 시켜보자.
사전에 쓸데없는 로고 / 등등을 다 지우고 나는 빈 페이지로 만들어두었다. 따라서 App.js 가 굉장히 비어있다.
//App.js
import React from "react";
import Snacks from "./Snacks";
function App() {
return (
<div>
<h1> Hi. </h1>
<Snacks />
</div>
);
}
export default App;
로 실행을 해보면
로컬 Page에서는 아래와 같이 출력된다.
😀
2. 한페이지에서 컴포넌트를 만들고, 그 컴포넌트를 불러오기.
컴포넌트가 아주 간단해서 파일로 만들 정도가 아니거나,
컴포넌트 여러개를 하나의 파일에 만들어두는게 훨씬 효율적일 수 있다.
(실무에서는 이런 경우가 아마 100%일듯)
아까 만들었던 샘플에서
Snack.js 파일을 지우고
App.js 에 합친다.
//App.js
import React from "react";
function Snacks() {
return <h2> My mom gave me a fried-egg. I hated it.</h2>;
}
function App() {
return (
<div>
<h1> Hi. </h1>
<Snacks />
</div>
);
}
export default App;
결과값은 아까의 그 놈과 똑같다.
아주 간단하다.
매우.
3. JSX? = HTML +javascript
뭔가 제목은 엄청나게 거창해보이지만
사실 별거 없다.
아까의 예제를 가져와보자.
//App.js
-앞 생략-
function App() {
return (
<div>
<h1> Hi. </h1>
<Snacks name ="pepero" />
</div>
);
}
export default App;
오 뭔가 본 적 있다
하시는 분이라면 아마 소싯적 html 좀 치셨을 듯하다.
<div style= "~~~~" > </div>이런 형태의 html 코드를 종종 보았을 것이기 때문에,
<Snack name = "pepero" />과 같은 코드는 꽤 html 과 닮았다는 생각이 들지도 모른다.
응 맞아.
맞다. 그거다. ㅎㅎ 이게 JSX 다.
더 깊은 공학적 지식은 훌륭한 선생님들께...
3. props 와 components
상기 코드 중,
<Snacks name ="pepero" />를 설명하자면
Snacks = Components
name = props
"pepero" = value
라고 할 수 있다.
즉, pepero라는 value로, Snacks 가 가진 엄청 많은 props 들 중
(props는 Snacks의 속성이므로
name, price, brand, texture 등등 내 마음대로 마구 만들어낼 수 있음) name이라는 특정 prop의 값을 준 것이다.
다시, 방금의 예제를 조금 더 고쳐보자.
//App.js
import React from "react";
function Snacks() {
return <h2> My mom gave me a fried-egg. I hated it.</h2>;
}
function App() {
return (
<div>
<h1> Hi. </h1>
<Snacks name = "pepero"
taste = "sweet"
priceDiscount = {false} />
</div>
);
}
export default App;
이렇게 Snacks 의 props를 여러개 (name, tast, priceDiscount)로 지정해보자.
자동 컴파일된 로컬을 보자.
이러하다.
function Snacks() App.js에서 Snacks함수는 My mom gave ~ 라는 문장을 출력하는 것이다.
그러나, 아래의 App() 함수 내에서 Snack 컴포넌트는 여러가지 props 를 뿌리고 있기 때문에
아마도 Snack() 함수에서는 해당 props를 모두 들고 올 것이다.
이것을 확인해보자.
import React from "react";
function Snacks(props) {
console.log(props);
return <h2> My mom gave me a fried-egg. I hated it.</h2>;
}
function App() {
return (
<div>
<h1> Hi. </h1>
<Snacks name = "pepero"
taste = "sweet"
priceDiscount = {false} />
</div>
);
}
export default App;
로컬로 들어가서
우클릭 -> 검사를 실행하고
console 확인 시,
화면과 같이 Object가 보인다.
바로, function Snacks()가 실행될 때, props를 들고 온다는 것.
Snacks 컴포넌트에서 특정 props를 들고 오고 싶은 경우
function Snacks(props.특정prop명)
혹은
function Snacks({특정prop명})
을 하면 된다.
*마지막!
import React from "react";
function Snacks({taste}) {
return <h2> My mom gave me a cookie. It was {taste} </h2>;
}
function App() {
return (
<div>
<h1> Hi. </h1>
<Snacks name = "pepero"
taste = "sweet"
priceDiscount = {false} />
</div>
);
}
export default App;
이렇게 수정을 다시 해보면
라고 나온다.
이제 대강 감이 잡히는 것 같다.
🐸
