TIL-2024.04.25 - React - 002. Component, Props, State
질문:
1. 컴포넌트가 뭐야 ?
2. 두개가 차이가 있어 ?
3. Props 와 State 가 뭐야?
컴포넌트:
- React에서 컴포넌트는 UI를 구성하는 독립적인 부분.
- 각 컴포넌트는 자체적인 상태(state)와 생명주기(lifecycle)를 가지며, 재사용 가능하고 독립적으로 관리 가능.
- 두 가지 주요한 종류의 컴포넌트는 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component).
함수형 컴포넌트:
- 함수형 컴포넌트는 함수로 정의되며, 주로 간단한 UI 조각을 만드는 데 사용.
- 최근 React 버전에서는 Hooks를 사용하여 함수형 컴포넌트에서도 상태와 다른 React 기능을 사용.
- 함수형 컴포넌트는 간결하고 읽기 쉬움
예제:
import React from 'react';
function FunctionalComponent() {
return <div>Hello, I'm a functional component!</div>;
}
export default FunctionalComponent;
클래스형 컴포넌트:
-클래스형 컴포넌트는 ES6 클래스로 정의됩니다.
- 상태(state)를 가질 수 있고, 생명주기 메서드(lifecycle methods)를 사용하여 컴포넌트의 동작을 제어.
- 과거에는 클래스형 컴포넌트가 주로 사용되었지만, 최신 버전의 React에서는 함수형 컴포넌트와 Hooks를 사용하는 추세.
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <div>Hello, I'm a class component!</div>;
}
}
export default ClassComponent;
Props:
- props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되는 메커니즘.
- "props"는 "properties"의 줄임말로, 컴포넌트에 속성을 전달하는 데 사용.
- 이를 통해 컴포넌트는 데이터를 전달받아 그에 따라 동적으로 작동
Props의 개념
- 데이터 전달: Props를 사용하면 부모 컴포넌트로부터 자식 컴포넌트로 read-only Data를 전달해서 자식 컴포넌트에서 변경 불가
- 컴포넌트 간 통신: Props를 사용하여 다양한 컴포넌트 간에 데이터를 전달하고 통신하여, 컴포넌트 간의 결합도를 낮춤
Props의 사용
- Props 전달: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, JSX에서 속성으로 값을 전달.
<ChildComponent propName={value} />와 같은 형태로 전달됩니다. - Props 접근: 자식 컴포넌트 내에서 props에 접근할 때는 함수의 매개변수처럼 사용.
{this.props.propName}과 같은 형태로 접근할 수 있습니다.
예제
// App
import React from "react";
import MyComponent from "./components/002-component/my-component";
const App = () => {
const name = "React"
return(
<div>
0번째와 1번째 사이
<MyComponent name={name} />
1번째와 2번째 사이
<MyComponent name="React Native"/>
2번째와 3번째 사이
<MyComponent/>
3번째와 4번째 사이
{/*<MyComponent name={3}/>*/}
</div>
)
}
export default App;
// MyComponent.jsx
import React from "react";
import PropTypes from "prop-types";
const MyComponent = (props) => {
console.log("what is in props:: ", props);
let {name} = props;
return (
<div>
안녕하세요! 제 이름은 {name} 입니다.
children 에서 컴포넌트 사이값을 보여주는
props.children -> {props.children}
</div>
);
};
// NOTE: 값이 아예 안주어진 경우 Default 값 설정 가능
MyComponent.defaultProps = {
name: "React Default",
};
// NOTE: propTypes를 통해 props 검증, chain 형식으로 계속 쓸 수 있음.
//
MyComponent.propTypes = {
name: PropTypes.string.isRequired
};
export default MyComponent;
STATE
- 컴포넌트 내부에서 바뀔 수 있는 값
- 컴포넌트 별로 나뉘는데, Class Component > state & Func Component > useState 이 사용됨
특징
- 내부 상태:
> State는 컴포넌트 내부에서 관리되는 데이터.
> 다른 컴포넌트에서 접근할 수 없으며 해당 컴포넌트 내부에서만 사용.
- 변경 가능:
> State는 변할 수 있습니다.
> setState() 메서드를 사용하여 state 값을 변경하고 컴포넌트를 다시 렌더링.
App.jsx
import React from "react";
import PropsExampleFunc from "./components/002-component/props-exmaple/props-example-func";
// import Counter from "./components/002-component/state-example-func.jsx/state-example-class"; // Class Component
import Counter from "./components/002-component/state-example-func.jsx/state-example-func"; // Func Component
const App = () => {
const name = "React";
return (
<div>
<div>
<h1>Props Example</h1>
0번째와 1번째 사이
<PropsExampleFunc name={name}/>
1번째와 2번째 사이
<PropsExampleFunc name="React Native"/>
2번째와 3번째 사이
<PropsExampleFunc/>
3번째와 4번째 사이
{/*<PropsExampleFunc name={3}/>*/}
</div>
<div>
<h1>State Example</h1>
<Counter/>
</div>
</div>);
};
export default App;
Class Component > State 사용
import React, { Component } from "react";
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h2>Counter</h2>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}
export default Counter;
Func Component > useState 사용
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<h2>Counter</h2>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
};
export default Counter;
State 주의 사항:
- state 값을 바꿔야할때는 setState 혹은 useState 를 통해 전달받은 세터 함수를 사용
const object = { a: 1, b: 2, c: 3 };
const nextObect = {...object, b: 2};
console.log(nextObect);
const array = [
{id: 1, value: true},
{id: 2, value: true},
{id: 3, value: false}
]
let nextArray = array.concat({id: 4, value: false}) // 새항목 추가
console.log("nextArray: ", nextArray)
nextArray = nextArray.filter(item => item.id !== 2) // id가 2인 항목 제거
console.log("nextArray: ", nextArray)
nextArray = nextArray.map(item => (item.id === 1 ? {...item, value: false}: item)) // id가 1인 항목의 value를 false 설정
console.log("nextArray: ", nextArray)
질문:
1. 컴포넌트가 뭐야 ?
- 컴포넌트는 UI를 구성하는 독립적인 부분으로 함수형, 클래스형으로 나뉜다.
2. 두개가 차이가 있어 ?
- 함수형: 함수로 정의 & State & Life Cycle Hooks 사용 불가 > Hooks 로 대처 가능
- 클래스형: 클래스로 정의 & State & Life Cycle Hooks 사용
3. Props 와 State 가 뭐야?
- Props: 부모에서 자식으로 읽기전용 데이터를 전달하는 데 사용
- State: 컴포넌트 내부 상태를 나타내며 컴포넌트 타입 (함수 VS 클래스)인지에 따라 다르게 사용