React component / props 와 state 알아보기!

component 

   기능 단위, 재사용 단위의 객체

 

• react ui component를 만드는 방법 

   1. 함수형 
      
       function 함수명(){
         return jsx;
       }

     
    2. 클래스형
    import {Component} from 'react'
    Class 컴포넌트이름 extends Component{

      render(){ //필수 함수 

        return jsx;
      }
    }

 

•  ES7 React/Redux/GraphQL/React-Native snippets 활용

-  rsc 함수를 통하여 함수형 컴포넌트를 만들 수 있음!!!

-  rsf  함수형 컴포넌트  + props 추가

-  rsfp 함수형 컴포넌트  + props + type정의 추가

-  rcc 클래스 컴포넌트 생성

 

- rsfp 함수형 컴포넌트  + props + type정의 생성 모습

import React from 'react';
import PropTypes from 'prop-types';

Welcome.propTypes = {
    
};

function Welcome(props) {
    return (
        <div>
            
        </div>
    );
}

export default Welcome;

 

Welcome.propTypes = {
  name: PropTypes.string.isRequired,
  style: PropTypes.object,
};

 => 타입 지정이 가능

 

props

properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트 에서 설정

- 데이타 전달하는 방식
- element에 작성된 attibute값이나 content는 props를 통해 자식 Component에 전달된다.

부모 => 자식으로 속성을 넘겨주는 요소!!!

 

함수형   : arguement로 전달된 props 사용
class형 : 상속받은 React.Component의 this.porps 사용

 

출처: 한입 크기로 잘라먹는 리엑트

 

- App.js

import React from "react";
import Welcome from "./Welcome"; // Welcome 컴포넌트를 import

// 스타일 객체 정의
const style = {
  backgroundColor: "black", // 배경색을 검정색으로 설정
  color: "pink", // 글자 색을 분홍색으로 설정
  fontSize: "50px", // 글자 크기를 50px로 설정
  fontWeight: "bold", // 글자를 굵게 설정
  padding: 6, // 내부 여백을 6px로 설정
};

const App = () => {
  return (
    <div>
      {/* 첫 번째 Welcome 컴포넌트 사용 */}
      <Welcome style={style}>class</Welcome> 

      {/* 두 번째 Welcome 컴포넌트 사용, name prop을 전달 */}
      <Welcome name="React Component">ureka</Welcome>
    </div>
  );
};

export default App;

 

 

- Welcome.js

import React, { Component } from "react";
import PropTypes from "prop-types"; // PropTypes를 통해 props의 타입을 검사

class Welcome extends Component {
  render() {
    // 부모 컴포넌트로부터 전달된 props 값 구조 분해 할당
    const { name, style, children } = this.props;
    
    return (
      <div>
        {/* style을 적용한 h1 태그, name은 props에서 전달된 이름 */}
        <h1 style={style}>Hello, {name}</h1>

        {/* children은 부모로부터 전달된 하위 콘텐츠 */}
        <h2>content: {children}</h2>
      </div>
    );
  }
}

// 기본값 설정: 부모로부터 props가 전달되지 않으면 사용될 기본 값들
Welcome.defaultProps = {
  name: "react", // name이 전달되지 않으면 기본값은 "react"
  style: {
    backgroundColor: "gray", // 기본 배경색은 회색
    color: "aqua", // 글자 색은 aqua
    fontSize: "30px", // 글자 크기는 30px
    fontWeight: "bold", // 글자는 굵게
    padding: 6, // padding은 6px
  },
};

// props의 타입 검사
Welcome.propTypes = {
  name: PropTypes.string.isRequired, // 'name'은 반드시 string 타입이어야 하며 필수로 전달되어야 함
  style: PropTypes.object, // 'style'은 object 타입이어야 하며 선택적
};

export default Welcome; // 이 컴포넌트를 외부에서 사용할 수 있도록 export

 

*  .defaultProps 를 통하여 기본값 설정!!!

 

 

이미지 로딩

1. public 경로에 있는 이미지    
- 경로명으로 바로 접근   
- Webpack에 의해 번들링이 되지 않기 때문에 이미지가 많거나 프로젝트가 커질수록 관리가 어려워짐

2. src/assets 경로에 있는 이미지   
- Webpack과 같은 모듈 번들러를 사용하여 이미지를 처리할 수 있으며 이미지를 최적화하고 번들에 포함 
- 사용방법    
 2.1  import를 통해 상수로 사용하기      
        import 상수명 from '경로'     
       <img src={상수명} alt="My Image" />     
ex)    import myImage from '../assets/images/my-image.jpg';     
         <img src={myImage} alt="My Image" />     

2.2 require() 함수를 이용하여 module import하기    
 require(이미지경로)

 

state

: state는 컴포넌트 내부에서 바뀔 수 있는 값

 컴포넌트 내부에서 사용하는 상태 값
 변경할 때는 Component가 제공하는 setState()함수를 통해서만 변경한다.

 

    ==> 객체를 state로 사용하는 경우 불변성을 유지
    ==> state로 사용하는 객체를 직접 변경하는 경우 
           react는 변경된 내용을 감지하지 못해 re-rendering이 안될 수 있음
           * deep copy를 통해 새로운 객체를 만들어서 내용을 변경 후 setState()로 변경해야 re-rendering된다.

 

  Component에서 사용하는 

  Variable과  Props와 State의 차이점

  - variable 

Component 내에서 const, let을 통해 선언한 변수
값이 변경되도 react가 인지하지 못하므로 re-rendering이 되지 않는다.

변수의 값을 변해서 화면에 띄우면 react 가 인식을 못함
=> 변수는 랜더링 대상이 아님

 

  - props    

부모 Component에서 자식 컴포넌트를 사용할때 값을 전달하는 수단.
부모 Component가 rendering될때 자식 Component도 rendering 된다.

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며,
컴포넌트 자신은 해당 props를 읽기 전용으로만 사용

 

 -  state

Component 내에서 사용하는 상태 값 setState()함수를 통해 변경됐을 때 re-rendering된다.

state는 컴포넌트의 상태를 변경하거나 업데이트할 때 사용하는 값
state는 읽기와 쓰기 모두 가능

 

 

- state 사용

함수형 Component에서 state 사용
     형식] const [state 명, setter] =userState(기본값);
     setter : setState명명
     const[count, setCount] =useState(0);

 

함수형 컴포넌트는 다속성으로 정의  / usestate 사용
클래스형 컴포는트는  / 생성자에서 this.state 

 

*!!! 객체의 불변성 중요 객체 카피 ...로 카피해서 사용

=> setsate 함수를 통해서 변경을 해주어야 한다! => 직접 변경 xx

 

- 함수형 컴포넌트로 state 사용 / 증가 감수 버튼 만들기

 

함수형 컴포넌트에서 state를 관리할 때는 useState 훅을 사용

=> useState는 컴포넌트가 처음 렌더링될 때 기본값을 설정하고, 상태를 변경할 수 있는 함수를 반환

import React, { useState } from 'react';

const Counter = () => {
    // useState를 통해 state를 관리
    const [count, setCount] = useState(0);  // 상태 변수 `count`와 상태를 변경할 함수 `setCount`

    // 상태 변경 함수들
    const onIncrease = () => {
        setCount(count + 1); // count 값을 1 증가
    };

    const onDecrease = () => {
        setCount(count - 1); // count 값을 1 감소
    };

    return (
        <div>
            <h1>Fun Count: {count}</h1>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

 

- 클래스 컴포넌트에서 state 사용

클래스형 컴포넌트에서는 state를 클래스의 속성으로 선언하고, this.setState() 메서드를 사용하여 상태를 업데이트

import React, { Component } from 'react';

export default class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 }; // 초기 state 설정
    }

    // 상태 변경 함수들
    onIncrease = () => {
        this.setState({ count: this.state.count + 1 }); // count 값을 1 증가
    };

    onDecrease = () => {
        this.setState({ count: this.state.count - 1 }); // count 값을 1 감소
    };

    render() {
        return (
            <div>
                <h1>Local Count: {this.state.count}</h1>
                <button onClick={this.onIncrease}>+</button>
                <button onClick={this.onDecrease}>-</button>
            </div>
        );
    }
}

 

 

- 아이디 / 비밀번호 클릭 창 이벤트 헨들을 통하여 업데이트 확인

   => 상태를 객체로 묶는 법까지 활용

 

1-1 React의 useState 훅을 사용하여 컴포넌트 상태를 관리

const [username, setUsername] = useState(""); //빈 문자열 ""로 초기화
const [message, setMessage] = useState("");

 

1-2 이벤트 핸들러를 통해 사용자가 입력한 값에 반응하고 상태를 업데이트

const handleUsername = (e) => {
  console.log(e);
  setUsername(e.target.value);
};

const handleMessage = (e) => {
  console.log(e);
  setMessage(e.target.value);
};// 입력 필드에서 사용자가 입력한 값을 가져옴

const handleClick = () => {
  setUsername("");
  setMessage("");
}; // username 과 message 상태를 빈 문자열로 초기화
   // 입력 필드의 값을 비움

 

1-3 랜더링되는 JSX 

<input 
  type="text" 
  value={username}  // 'username' 상태를 입력 필드에 바인딩
  onChange={handleUsername}  // 사용자가 입력할 때마다 상태 'username'을 업데이트
  name="username" 
  placeholder="user name" 
/>

<input 
  type="text" 
  value={message}  // 'message' 상태를 입력 필드에 바인딩
  onChange={handleMessage}  // 사용자가 입력할 때마다 상태 'message'를 업데이트
  name="message" 
  placeholder="message" 
/>

<button type="button" onClick={handleClick}> 
  확인  // 버튼 클릭 시 상태 초기화
</button>

<div>
  {username}  // 'username' 상태를 화면에 출력
  {username !== "" && ":"}  // 'username'이 비어 있지 않으면 ':' 출력
</div>

state 를 통항 양방향 처리하기

: react에 경우 Virtual Dom을 사용하기 때문에 양뱡항 처리를 직접 해주어야 한다!

 

value 속성을 사용해 상태(username, message)를 입력 필드에 바인딩하고

onChange 이벤트로 상태를 업데이트

=> 버튼 클릭 시 상태를 초기화하여 사용자의 입력을 리셋

 

컴포넌트의 상태를 표시!

컴포넌트가 입력을 받는 것이라면 / 입력 값을 보관을 해야한다!

컴포넌트를 일반 변수에 보관 해놨다가 보내기만 하면 좋지만 다른 곳에도 사용 필요

re-randering 필요하기 때문에 state 에 저장을 한다 변경 될때마다 staet에 저장 했다 사용!!!!

양방향 처리해주는 것을 state로 해주어야 한다 
onChange event를 거로 state 값은 value 로 양방향 처리 해주어야 한다....

 

-  객체를 상태로 묶어서 관리!!!!!! 

=> 상태가 많아질 경우, 객체로 묶어 관리하는 것이 더 유리

     여러 개의 상태를 하나의 객체로 묶어서 관리

 

    불변성을 유지하기 위해 새로운 객체로 복사하여 업데이트를 진행해야 한다!!!

import React, { useState } from "react";

const EventHandle = () => {
  const [data, setData] = useState({
    message: "",
    username: "",
  });

  const {username, message} = data;

  const handleChange = (e) => {
    // 불변성을 유지하며 새로운 객체를 생성
    const newForm = {
      ...data,  // 기존 data 객체를 복사
      [e.target.name]: e.target.value,  // 변경된 필드만 업데이트
    };
    setData(newForm); // 새로운 객체를 setData로 상태 갱신
  };

  const handleClick = () => {
    setData({
      message: "",
      username: "",
    });
  };

  return (
    <div>
      <input 
        type="text"  
        value={username} 
        onChange={handleChange} 
        name="username" 
        placeholder="user name"
      />
      <input 
        type="text" 
        value={message} 
        onChange={handleChange} 
        name="message" 
        placeholder="message"
      />
      <button type="button" onClick={handleClick}>
        확인
      </button>
      <div>
        {username}{username !== "" && ":"}
      </div>
    </div>
  );
};

export default EventHandle;