[React 입문] 리액트 컴포넌트 (부모-자식 컴포넌트)

 위치:  src/ App.js

 

1. 리액트 컴포넌트란?

- 재사용하기 위한 함수

- 컴포넌트 이름은 무조건 ★ 대문자 ★ + 카멜케이스로 짓기

 

2. 함수형 컴포넌트 (클래스형 컴포넌트도 있지만 주로 함수형 컴포넌트를 사용 예정)

- props로 입력 받음 

- 화면에 어떻게 표현되는지 React 엘리먼트를 return

* 엘리먼트 : 단순히 화면에 그려지는 html적 요소라고 생각하기 *

function Welcome(props){
  return <h1>Hello, {props.name} </h1>
}

function App(){
  return <div>hello</div>
}

 

 

3. CRA 프로젝트를 컴포넌트 관점에서 해석

(1) 컴포넌트 밖 (내가 필요한 파일을 가져오는 영역) : import [패키지명] from [경로]

(2) 자바스크립트 영역 + JSX 영역

(3) 내가 만든 컴포넌트 밖으로 내보내는 영역

import React from 'react'; // (1) 내가 필요한 파일 가져오는 영역

function App(){

// (2) 자바스크립트 영역

return (
// (2) HTML & JSX 영역

  <div 
     style ={{
     	heigth: '100vh',
        display: 'flex',
        flexDirection : 'column',
        justifyContent : 'center',
        alignItems : 'center'
     }}
  >  
  </div>

  );
}

export default App; //(3) 내가 만든 컴포넌트 내보내는 영역

 

 

4. 부모-자식 컴포넌트

- 컴포넌트 안에 컴포넌트 넣기 

- 자식 컴포넌트 사용:  <Child /> 

import React from 'react';

function Child(){
 return <div>나는 자식입니다.</div>;
}

function App(){
 return <Child/>
}

export default App;

 

- 3개의 컴포넌트로 연결하기 (할아버지, 엄마, 자식) :

import React from 'react';

function Son(){
 return <div>아들입니다.</div>
}


function Mother(){
  return <Son />
}

function GrandFather(){ 
  return <Mother />
}

function App(){
  return <GrandFather />
}


export default App;

 

 

 

5. Rending =  화면에 보여지게 하다