๋ฐ์ํ
[์ถ์ฒ : Youtube - ์ํ์ฝ๋ฉ]
https://youtu.be/e2c1EUcW7oo?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
์ค๋ ๋ฐฐ์ฐ๋๊ฑด ์ดํดํ๋ คํ์ง๋ง๊ณ ๊ทธ๋ฅ ๊ทธ๋ ๊ตฌ๋ ํ๊ณ ๋ฐ์๋ค์ด๋๊ฒ ํธํ๋ค๊ณ ํ๋ค...
โป์ฃผ์ : ๋ฆฌ์กํธ์์๋ props์ ๋ฐ์ดํ๋ฅผ ์ฐ๋ฉด ๋ฌธ์๋ก ์ธ์์ ํ๋ค.
๋ฌธ์๊ฐ ์๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ฝ๋๋ก์ ์คํํ๊ฒํ๊ณ ์ถ์ผ๋ฉด ์ค๊ดํธ{}๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค.
src/App.js
import './App.css';
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
import React, { Component } from 'react';
class App extends Component {
constructor(props) { // constructor ํจ์๋ ์ด๊ธฐํ๋ฅผ ๋ด๋นํ๋ค.
super(props);
this.state = {
subject:{title:'WEB', sub:'World Wide Web!'}
} // state์ ๊ฐ์ ์ด๊ธฐํํ๋ค.
}
render() {
return (
<div className="App">
<Subject title={this.state.subject.title}
sub={this.state.subject.sub}>
</Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
export default App;
๋ฐ์ํ
'JavaScript > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React Slick ์ฌ์ฉ๋ฒ (0) | 2021.11.16 |
---|---|
Custom-Hook (0) | 2021.11.16 |
[์ํ์ฝ๋ฉ-React] Component ํ์ผ๋ก ๋ถ๋ฆฌํ๊ธฐ (0) | 2021.05.29 |
[์ํ์ฝ๋ฉ-React] props (0) | 2021.05.29 |
[์ํ์ฝ๋ฉ-React] ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ 2 (0) | 2021.05.28 |
๋๊ธ