자바스크립트 공부를 어느정도 이제 했고, 이제 슬슬 리액트라는것도 배워볼 때가 된것같아서
오늘 드디어 리액트라는 쎅시한 녀석과의 첫만남을했다.
우선 컴포넌트, JSX, props가 무엇인지 정말 입문 파트정도만 일단 배웠는데, 리액트 첫걸음 기념으로 간단하게 정리해보고 싶어서 글을 남긴다.
우선 컴포넌트라는건 부품의 의미로 해석할 수 있을것같다.
npm install create-react-app (앱 이름) 으로 처음 리액트를 설치하면
src라는 폴더에 App.js 파일을 볼수있는데 기본적으로 있는데,
import React from "react";
function App() {
return <div className="App">Hello</div>;
}
export default App;여기선 function App() 이 녀석이 컴포넌트다.
분명 자바스크립트 파일인데 return으로 HTML을 리턴하는 형태를 가지고있다. ( 이런 문법을 JSX 라고 한다. HTML + 자바스크립트라고 생각!)
정말 흥미롭구만.. 아 참 그리고 이 컴포넌트라는 귀요미들을 만들때는 반드시 React를 import 해주어야한다.
그리고 컴포넌트라는 이름답게 부품처럼 활용된다고한다.
그리고 이 컴포넌트를 src/index.js에서 ReactDom.render() 라는 함수를 이용해서 HTML내에 삽입한다.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));<App /> : 삽입할 컴포넌트
document.getElementById("root")); : HTML 파일내에 root라는 id를 가진 요소
아래 코드블럭은 public/index.html인데, 아래에보면 root라는 id를 가진 div가있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
우리가 보낸 컴포넌트가 저부분에 들어가는것이다!!
글을 의식의 흐름대로 적다보니까 진짜 내맘대로느낌인데 이제 props가 무엇인지 적어야겠다.
props 는 properties 의 줄임말인데, 어떤 값을 컴포넌트에 전달 할 때, props를 사용한다고한다.
import React from "react";
function Food({ favourite }) {
return <h1>I like {favourite}</h1>;
}
function App() {
return (
<div>
<h1>Hello</h1>
<Food favourite="kimchi" />
<Food favourite="ramen" />
<Food favourite="samgiopsal" />
<Food favourite="chukumi" />
</div>
);
}이 코드를 토대로 설명을 적어보려고한다.
우선 먼저 봐야할곳은
function App() {
return (
<div>
<h1>Hello</h1>
<Food favourite="kimchi" />
<Food favourite="ramen" />
<Food favourite="samgiopsal" />
<Food favourite="chukumi" />
</div>
);
}요 부분이다. 코드를 보면 범상치않은 태그를 확인할 수있다.
<Food favourite="kimchi" />
<Food favourite="ramen" />
<Food favourite="samgiopsal" />
<Food favourite="chukumi" />
이 의문의 푸드4인방인데, 얘네는 아까 언급한 컴포넌트다! 컴포넌트는 <Food /> 이런형태로 다른곳에 전달해줄수있다.
"근데 저 옆에 favourite 이거는 뭔가요?"
"그것이 바로 props다"
그러니깐 favourite라는 이름으로 김치 라멘 삼겹살 추쿠미값을 전달해주고있는것이다.
그리고 이 여기에 꼭 문자열만 보낼 수 있는것도 아니다. 숫자 배열 객체도 넣어서 보낼수있다
function Food({ favourite }) {
return <h1>I like {favourite}</h1>;
}favourite 를 파라미터로 받고있는걸 확인할 수 있다. 요 favourite 가 저 favourite 이다.
다른방식으로 받을수도있는데,
function Food(props) {
return <h1>I like {props.favourite}</h1>;
}이런식으로 값을 받을수있다.
"그럼 { favourite } 로는 어떻게 받을수있는거에요 ? "
그것은 자바스크립트의 ES6문법 덕분에 가능하다고한다.
console.log로 props를 찍어보면
{ favourite : "kimchi" } 이런식으로 나오고
console.log(props.favourite)를 하면 kimchi가 콘솔에 출력된다.
" object를 열어서 object에 있는 favourite를 꺼낸다 "
"function Food( { favourite } )"
이런느낌이랄까..
function Food({ favourite }) {
return <h1>I like {favourite}</h1>;
}"I like kimchi"
"출력"
그러면 위에 썼던 전체 코드는 어떻게 출력이 되겠는가
"I like kimchi"
"I like ramen"
"I like samgiopsal"
"I like chukumi"
이것이 컴포넌트와 props의 컬라보레이션..
여기까지 오늘 배운 내용의 복습이었다.
'프로그래밍 > React' 카테고리의 다른 글
| React - styled-components? (0) | 2021.08.19 |
|---|---|
| React - CSS 모듈? (0) | 2021.08.19 |
| React - 컴포넌트 Lift cycle (0) | 2021.08.15 |
| React - 클래스 컴포넌트? state? (0) | 2021.08.12 |
| React - PropTypes? (0) | 2021.08.10 |