리엑트 컨포넌트 만들어 연동하기

 

1. src /파일/폴더.jsx

src/파일/컨포넌트명.jsx 

 

src/conponents/Hello.jsx     파일명은 통상적으로 대문자로 만든다. 

                                            직관적이기 때문

 

 

2. app.js에서 호출

import 컨포넌트명 from '경로 ';

import Hello from './conponents/Hello';

function App() {
  return (
    <div className="App">
      <Hello/>
    </div>
  );
}

export default App;

 

 

 

3. 컨포넌트 만들기

- 클래스 컨포넌트 작성법

                  자신만의 생명주기, 메소드, 생성자등을 가질 수 있다.
                  web 에서는 현재 거의 사용하지 않는다.  (앱에서 주 사용)
                  수정하기 위해 과정이 너무 복잡하기때문.
                  화살표 함수나 function함수와 다르게 메소드 이용이 가능하다.

 

import React from "react";

class Hello extends React.Component{

    render(){
        return (
            <h1>안녕하세요</h1>
        )
    }
}

export default Hello;

 

 

 

 

 

- 화살표 함수 작성법
                   this 부모 컨포넌트를 가리키므로 로직이 명확해진다.
                   데이터를 주고 받는 (명확하거나 기능성이 있는)유틸리티 컨포넌트에서 많이 사용

// const Hello2 = function(props) {  //props 메개변수가 넘어올 수있기에 작성
const Hello2 = (props) => {
    return (
           <h1>안녕하세요22</h1>
       )
   }
   
   export default Hello2;

 

 

 

 

- function함수 키워드 사용법
                   대부분 리엑트 컨포넌트에서 거의 사용

function Hello3() {        //props 감춰져 있음 = 매개변수와 같다고 생각해보면 무난
    return (
        <h1>안녕하세요33</h1>
    )
}

export default Hello3;