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 클래스)인지에 따라 다르게 사용