TIL 22 - React 예제 200(1~5)

✍️ .jsx에 html 적용

< 📁 _App.js >

import React from 'react';

function App(){
     return(
       <div>
          <h1>Start React 200!</h1>
       </div>
    );
  }
  
  export default App;     

👉 import React from 'react';
이 코드가 없다면 react는 이 파일의 component를 사용하지 못한다.
👉 export default App;
App이라는 컴포넌트를 내보낸다는 뜻이다.이 코드를 사용하면 다른 컴포넌트에서
App컴포넌트로 불러와 사용할 수 있다.

✍️ .jsx에 css 적용

< 📁 _App.js >

import React from 'react';
import './App.css';

function App(){
     return(
       <div>
          <h1>Start React 200!</h1>
       </div>
    );
  }
  
  export default App;     

👉 같은 폴더 경로에 위치한 App.css를 import 한다.
상위 폴더에 위치하는 css를 사용하려면 './../App.css'와 같이 사용해 접근한다.

✍️ Component 사용하기

< 📁 R01_LifecycleEx.js >

import React from 'react';

class R01_LifecycleEx extends Component{
   render(){
     return(
       <div>
          <h1>Start React 200!</h1>
       </div>
    );
   }
  }
  
  export default R01_LifecycleEx;     

👉 index.html의 id = 'root'의 div요소 내부에 App 컴포넌트가 렌더링 된다.

< 📁 _App.js >

import React from 'react';
import './App.css';
import LifecycleEx from './R01_LifcycleEx';

function App(){
     return(
       <div>
          <h1>Start React 200!</h1>
          <LifecycleEx/ >
       </div>
    );
  }
  
export default App; 

👉 App.js 파일과 같은 경로에 위치한 R01_LifcycleEx.js파일을 import해 사용할 수 있도록 한다.
R01_LifecycleEx.js에서 작성한 컴포넌트를 사용하고 render() 함수에서 읽어 들였던 <h2> 코드가 이식된다.

✍️ 생명주기 함수 render() 사용하기

< 📁 R02_LifecycleEx.js >

import React, { Component } from 'react';

class R01_LifecycleEx extends Component{
   render(){
     return(
       <div>
          <h1>Start React 200!</h1>
       </div>
    );
   }
  }
  
  export default R02_LifecycleEx;     

👉 react에서 제공하는 Component Class를 상속받아 구현하기 위해 Component를 import 해준다.
👉 render는 리턴되는 html 형식의 코드를 화면에 그려주는 함수이다.
👉 class 속성을 사용하면 render함수는 필수적으로 따라와야한다.

< 📁 _App.js >

import React from 'react';
import './App.css';
import LifecycleEx from './R02_LifcycleEx';

function App(){
     return(
       <div>
          <h1>Start React 200!</h1>
          <LifecycleEx/ >
       </div>
    );
  }
  
export default App; 

👉 App.js 파일과 같은 경로에 위치한 R02_LifcycleEx.js파일을 import해 사용할 수 있도록 한다. R02_LifecycleEx.js에서 작성한 컴포넌트를 사용한다.

✍️ 생명주기 함수 constructor(props) 사용하기

< 📁 R03_LifecycleEx.js >

import React, { Component } from 'react';

class R03_LifecycleEx extends Component{
   constructor(props){
      super(props);
      this.statd = {};
 } 
   render(){
     return(
       <div>
          <h1>Start React 200!</h1>
       </div>
    );
   }
  }
  
  export default R05_LifecycleEx;     

👉 constructor(props)함수는 생명주기 함수 중 가장 먼저 실행되며, 처음 단 한번만 호출된다. 컴포넌트 내부에서 사용되는 state(변수)를 선언하고 부모 객체에서 전달받은 props(변수)를 초기화할 때 사용한다. super 함수는 가장 위에 호출해야한다.

< 📁 _App.js >

import React from 'react';
import './App.css';
import LifecycleEx from './R03_LifcycleEx';

function App(){
     return(
       <div>
          <h1>Start React 200!</h1>
          <LifecycleEx/ >
       </div>
    );
  }
  
export default App; 

👉 App.js 파일과 같은 경로에 위치한 R03_LifcycleEx.js파일을 import해 사용할 수 있도록 한다. R03_LifecycleEx.js에서 작성한 컴포넌트를 사용한다.

출처 : 초보자를 위한 리액트 200제(React)

❗️마치며

오늘 리액트를 배우고 props와 state에 대해 조금은 알게 된 것 같다.
아직은 많이 낯선 라이브러리지만 곧 익숙해질 것이라 믿으며.. 열심히 공부해야겠다 😆