๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JavaScript/React

[์ƒํ™œ์ฝ”๋”ฉ-React] State ์‚ฌ์šฉ

by ์ฝ”๋”ฉํ•˜๋Š” ๋ถ•์–ด 2021. 5. 29.
๋ฐ˜์‘ํ˜•

[์ถœ์ฒ˜ : 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;

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€