[REACT] 작업 환경 설정 및 "Props"

작업 환경 설정

1. Node.js 다운로드 및 설치

 

2. VS Code설치

 

3. npm install -g create-react-app

   : 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 환경 구축을 도와줌

 

4. npm install npx -g

 

5. npx create-react-app FRONTTEST : 폴더명이 "FRONTTEST"인 새로운 리액트 프로젝트 만들기

 

6. cd FRONTTEST : 명령어를 실행해 해당 디렉터리로 이동한다.

 

7. npm start로 프로젝트 실행시켜보기

   다음과 같은 창이 띄면 기본 셋팅 완료!!

REACT의 중요한 키워드 : 컴포넌트

1. 컴포넌트 만들기 >> src 안에 Hello.js 만들기

import React from 'react';

function Hello() {
	return <div>Hello World</div>
}

export default Hello;

 1) import React from 'react';  >>  리액트 컴포넌트를 만들기 위해 리액트를 불러오는 작업.

 2) export default Hello;  >>  현재 창의 코드를 Hello라는 컴포넌트 이름으로 내보내겠다는 의미.

 

 

2. 컴포넌트 사용하기  >> src안에 있는 App.js

import React from 'react';
import Hello from './Hello';

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

export default App;

결과 값 : Hello World

 

 

 

Props 기본 사용법

: Props란 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용한다.

 1. App 컴포넌트에서 Hello 컴포넌트 사용하기

//App.js

import React from 'react';
import Hello from 'Hello';

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

export default App;

//Hello.js

import React from 'react';

function Hello(props){
	return <div>Hello World{props.name}</div>
}

export default Hello;

전달받은 값을 props 파라미터를 통해 조회한다.

실행 시 "Hello World" 다음에 react를 출력한다.

 

결과 값:

 

2. 여러 개의 Props 전달하기

//App.js

import React from 'react';
import Hello from 'Hello';

function App(){
	return(
     <div>
     	<Hello name="react" color="red" />
     </div>
    );
}

export default App;

//Hello.js

import React from 'react';

function Hello(props){
	return <div style={{color: props.color}}>Hello World{props.name}</div>
}

export default Hello;

결과 값 :

 

 

3. 컴포넌트 태그 중첩하여 사용하기.

먼저 컴포넌트 태그로 사용할 Wrapper.js 생성하기

//Wrapper.js
import React from 'react';

function Wrapper({children}){
	const style = {
    	border : '2px solid gray',
        padding : '16px'
    };
    return(
    	<div style = {style}>
        	{children}
        </div>
    );
}

export default Wrapper;

//App.js
import React from 'react';
import Wrapper from './Wrapper';

function App(){
	return (
    	<Wrapper>
        	<Hello name = "react" color="red" />
            	<Hello color = "blue" />
        </Wrapper>
    );
}

export default App;

결과 값: