[react] React 컴포넌트와 Props, State

1. React 컴포넌트란? 

React 컴포넌트는 UI(사용자 인터페이스)를 나누는 독립적이고 재사용 가능한 단위
컴포넌트는 JavaScript 함수 또는 클래스 형태로 정의된다 
props를 입력으로 받아 JSX를 반환한다 

 

※ 알아볼 점 

① 함수형 컴포넌트와 클래스형 컴포넌트 중 어떤 것을 선택해 사용해야 할까요?

② Props와 State의 차이는 무엇인지 정리 

 

 

2. React 컴포넌트의 구성

2-1. 함수형 컴포넌트

JavaScript 함수로 작성되며 props를 받아 JSX를 반환한다 

주로 간단한 UI를 표현하거나 React Hooks와 함께 상태를 관리할 때 사용한다 

function Greeting(props) {
	return <h1>Hello, {props.name}!</h1>;
}

 

2-2. 클래스형 컴포넌트 

ES6 클래스 문법을 사용해 작성되며, state와 라이프 사이클 메소드를 사용할 수 있다 

class Greeting extends React.Component {
	render() {
    	return <h1>Hello, {this.props.name}!</h1>;
    }
}

 

 

☞ React 16.8 이후로는 주로 함수형 컴포넌트와 Hooks이 선호된다 

 

 

3. React 컴포넌트의 역할

1) UI 렌더링 

컴포넌트는 특정 상태에 따라 화면에 표시될 UI를 정의한다 

 

2) 재사용성

동일한 컴포넌트를 여러 번 사용할 수 있어 코드를 효율적으로 관리할 수 있다 

 

3) 상태 관리 

컴포넌트는 상태(State)와 속성(Props)을 통해 동적인 UI를 생성한다 

 

 

4. React 컴포넌트 만들기 

4-1. 함수형 컴포넌트 어플리케이션 생성

JavaScript 함수로 정의한다 

 

1) npx로 생성 

cmd 명령어 실행

npx create-react-app component_demo

 

 

2)  components 폴더 생성 - Greeting.js 생성

> /src/components/Greeting.js

// 함수형, 클래스형 버전 포함 
// src/components/Greeting.js

//함수형 컴포넌트
function Greeting() {
	return <h1>Hello, React!!!</h1>;
}

export default Greeting;

 

 

3) App.js 수정 

App.js의 내용 변경하기

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

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

export default App;

 

 

4) 어플리케이션 실행 

npm start

 

→ 실행화면 

어플리케이션 실행

 

 

4-2. 클래스형 컴포넌트 생성하기 

React의 Component를 상속해 정의한다 

 

1) component_demo 프로젝트를 그대로 쓴다 

2) Greeting.js 수정 

// 함수형, 클래스형 버전 포함
// src/components/Greeting.js

// 함수형 컴포넌트
/*
function Greeting() {
	return <h1>Hello, React!!!</h1>
}

export default Greeting;
*/

// 클래스형 컴포넌트
 import React, { Component } from 'react';
 
 class Greeting extends Component {
 	render() {
    	return <h1>Hello, React!</h1>
    }
 }
 
 export default Greeting;

 

3) 어플리케이션 실행 

npm start

hello 클래스형 컴포넌트

 

 

5. React의 Props와 State

5-1. Props(속성)

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달한다 

읽기 전용 데이터로 자식 컴포넌트에서 수정할 수 없다 

 

1) Greeting.js 코드에 props를 사용해준다 

속성을 사용하는 코드

// src/components/Greeting.js

import Reac, { Component } from 'react';

function Greeting(props) {
	return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

 

2) App.js 

{props.name}의 설정

// src/App.js
import './App.css';
import React from 'react';
import Greeting from './components/Greeting';

function App() {
	return <Greeing name="Minjeong" />;
}

export default App;

 

 

3) 실행 결과 

props의 사용 예제

 

 

5-2. State(상태)

컴포넌트 내부에서 관리되는 동적인 데이터를 state라고 한다 

 

카운터 만들기 

1) components 폴더에 Counter.js 생성

카운터 만들기

// src/components/Counter.js
import React, { useState } from 'react';

function Counter() {
	const [count, setCount] = useState(0);
    
    return (
    	<div>
        	<p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count +1)}>증가</button>
        </div>
    );
}

export default Counter;

 

 

2) App.js 수정 

return Counter

 

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

// State 예제
function App() {
	return <Counter />;
}

export default App;

 

 

3) 실행화면 

처음 실행화면

→ 증가를 누르면 숫자가 올라가는 Counter

증가를 눌러 11을 만들었다

 

 

6. Props와 State 정리하는 예제  

☞ 이름을 입력받아 화면에 표시하는 컴포넌트 만들기 

1) components 폴더에 InputGreeting.js 생성 

생성한 js 파일 내용

// src/components/InputGreeting.js
import React, { useState } from 'react';

function InputGreeting() {
	const [name, setName] = useState('');
    
    return (
    	<div>
        	<input
            type="text"
            placeholder="이름을 입력하세요"
            value={name}
            onChange={(e) => setName(e.target.value)}
            />
            <h1>Hello, {name}!</h1>
        </div>
    );
}

export default InputGreeting;

 

 

2) App.js 수정 

InputGreeting.js를 반환해준다

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

function App() {
	return <InputGreeting />;
}

export default App;

 

 

3) 실행화면 

이름 입력할 수 있는 화면 등장

 

4) 테스트 

글을 입력하는데로 화면에 나온다

 

※ 알아볼 점 정리 

① 함수형 컴포넌트와 클래스형 컴포넌트 중 어떤 것을 선택해 사용해야 할까? 

→ React 최신버전에서는 함수형 컴포넌트 사용을 권장함 

② Props와 State의 차이는 무엇인지 정리 

→ Props는 부모에서 자식으로 데이터를 전달하고, 

State는 컴포넌트 내부에서 관리된다 

 

 

오늘의 깃 잔디심기 완료! 

https://github.com/minjeong-j/component_demo

GitHub - minjeong-j/component_demo: react 컴포넌트와 props, state