[생활코딩] state 소개

 

 

생활코딩 https://www.youtube.com/watch?v=rOpg2KUPW2M&t=29s

https://www.youtube.com/watch?v=e2c1EUcW7oo

 

 

 

 

App이라고 하는 Component에 Subject라고 하는 하위 Component가 있다.

하위 Component에 props의 값들이 하드코딩 되어 있다.

import React,{Component} from 'react';
import TOC from "./components/TOC";
import Content from './components/Content';
import Subject from './components/Subject';
import './App.css';

class App extends Component{
  render(){
    return(
      <div className="App">
      hello react!ffhs
      <Subject title="WEB" sub="world wide web!@"></Subject>
      <Subject title="React" sub="For UI"></Subject>
      
      <TOC></TOC>
      <Content title="HTML" desc="HTML is HyperText Markup language."></Content>
    </div>
    );
  }
}

export default App;

보기 싫으니 값들을 state로 만들고 그 state 값을 Subject의 props로 전달하는 것을 통해서 코드를 개선하자.

 

 

 

state 값을 초기화 시키려한다. 그 초기의 값으로 <Subject title="WEB" sub="world wide web!"></Subject> 이 값들을 세팅하려고 한다. 어떤 component가 실행될 때 render 함수보다 먼저 실행되면서 component 를 초기화시켜주고 싶은 코드는 constructor 안에 코드를 작성하면 된다.

즉, component를 실행될 때 constructor 라는 함수가 있다면 제일 먼저 실행되어 초기화를 담당한다. 

 

 

 

 

이제 초기화가 끝나면 this.state={}를 통해 state 값을 초기화 시킨다.

이 때, subject 값을 state화 시킬것이기 때문에 subject property 의 값으로 다시 객체를 준다.

constructor(props){

    super(props);

    this.state={

       subject:{title:'WEB',sub:'world wide web!!'

     }

}

 

이렇게 만든 state는 다양한 방법으로 사용할 수 있는데 오늘은 이 방법을 사용해보자.

<Subject

     title={this.state.subject.title}

     sub={this.state.subject.sub}>

</Subject>

 

 

App.js

import React,{Component} from 'react';
import TOC from "./components/TOC";
import Content from './components/Content';
import Subject from './components/Subject';
import './App.css';

class App extends Component{
  constructor(props){
    super(props);
    this.state={
      subject:{title:'WEB',sub:'world wide web!!'}
    }
  }
  render(){
    return(
      <div className="App">
      <Subject 
        title={this.state.subject.title} 
        sub={this.state.subject.sub}>
      </Subject>
      <Subject title="React" sub="For UI"></Subject>
      
      <TOC></TOC>
      <Content title="HTML" desc="HTML is HyperText Markup language."></Content>
    </div>
    );
  }

}

export default App;

 

 

app.js를 사용하는 파일은 index.js 파일이다.

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

 

 

index.js 코드에 App 이라는 Component 를실행하는 코드가 있다.

이 코드를 보더라도 내부적으로 state 값이 subject 값이 있는지 없는지 알 수 없다.