[ React ] State 상태 & Props 속성 알아보기 ③

❗ 컴포넌트 이름은 대문자 ! 

❗ 리액트는 컴포넌트 상태가 변할때 마다 리렌더링 수행! 

 

🤔💬 Props

 ❗   Props 부모 -> 자식 데이터 전달 가능!  (역방향 불가!)

Props는 React 컴포넌트에게 데이터를 전달하는 방법 중 하나입니다.
Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되며, 컴포넌트 내부에서 변경할 수 없
는 읽기 전용 데이터입니다.
Props를 사용하면 컴포넌트 간의 데이터 전달이 간단하고 유지보수하기 쉬워집니다. 또한
컴포넌트의 재사용성을 높일 수 있습니다.

Props가 뭔지 알아봤으니 직접 실습을 해보자 ! 

 

◾ 실습하기전 파일 만들기 

 

 

📚 VS code

📘 APP.js

/* import logo from './logo.svg'; */
import './App.css';

// components 폴더의 Exam1.js를 가져와서 사용
// 사용할 때 이름을 Ex1으로 지정
import Ex1 from './components/Exam1';
import Ex2 from './components/Exam2';
import PropsEx from './components/R01_props';

/* index.js에서 App을 부르고 있어! */
function App() {

  // 리액트의 컴포넌트는 딱 ! 하나의 요소만을 반환할 수 있다.
  // -> 여러 요소를 반환하고 싶다면 부모 요소로 묶어준다! 

  return (
    /* fragment(<></>) : 반환 요소를 감쌀 때 사용, 해석 X */
    <>
      {/* jsx 주석 */}
      <h1>Hello React!!</h1>
      <div>리액트 배운다!</div>

      {/* Ex1 랜더링 할거야! Ex1이 누구지 ? Exam1.js만들어! */}
      {/* <Ex1/> */}
      {/* <Ex2/> */}

      <PropsEx name={'홍길동'}/>
      <PropsEx name={'고길동'}/>

    </>
  );
}

export default App;

💻 코드분석 
1. import PropsEx from './components/R01_props';
   새로운 파일 만들었으니 import 진행 

2. import 한 PropsEx 이름에 홍길동/ 고길동작성하여 R01_props 값 넘기기 
	<PropsEx name={'홍길동'}/>
	<PropsEx name={'고길동'}/>

 

 

📘 R01_props.js

import React from "react";

// props : 부모 컴포넌트가 자식 컴포넌트에게 데이터 전달 시 사용하는 객체
// ** pros 자식 -> 부모 데이터 전달은 불가능 ** 

/* 부모! */
const PropsEx = (props) => {
    // props 매개변수 : 부모로 부터 전달 받은 값이 담겨 있는 객체 
    //console.log(props);
    //console.log(props.name);

    const menu = {'김밥':3000, '떡볶이':4000}

    return(
        <>
        <h1>{props.name}</h1>
        <ChildComponent name = {props.name} age={props.name === '홍길동'?20:25}/>
        <MenuPrint {...menu}/>
        {/* <MenuPrint {...menu}/> -> <MenuPrint 김밥={3000}, 떡볶이={4000}/>  */}
        </>
 
    );

}

export default PropsEx;


const ChildComponent = (props)=>{
    return(
        <>
            <ul>
                <li>이름 : {props.name}</li>
                <li>나이 : {props.age}</li>
            </ul>
        </>
    )
}

const MenuPrint = (props)=> {

    return(

        <h4>김밥 : {props.김밥},떡볶이 : {props.떡볶이}</h4>

    );
}

---

💻 1. 코드 분석 

1. const PropsEx = (props) => { ..생략 } 
   props : 부모로부터 전달 받은 값이 담겨 있다 
   ➡  <PropsEx name={'홍길동'}/>
       <PropsEx name={'고길동'}/>
       

     const PropsEx = (props) => {

        return(
            <>
            <h1>{props.name}</h1>
            </>

        );

    }
    export default PropsEx;

 

👀 1. 출력화면 

 

💻 2. 코드 분석 

2.  ChildComponent설명 !

	const PropsEx = (props) => {
   
        return(
            <>
            <h1>{props.name}</h1>
            <ChildComponent name = {props.name} age={props.name === '홍길동'?20:25}/>

        );

    }
    export default PropsEx;

    
    const ChildComponent = (props)=>{
        return(
            <>
                <ul>
                    <li>이름 : {props.name}</li>
                    <li>나이 : {props.age}</li>
                </ul>
            </>
        )
    }
    ➡ export 안해도 됨 ! 어차피 propsEx 에서 쓰고 있음!

👀 2. 출력화면 

💻 3. 코드 분석 

3.  MenuPrint 설명 !

        const MenuPrint = (props)=> {

            return(

                <h4>김밥 : {props.김밥},떡볶이 : {props.떡볶이}</h4>

            );
        }


	const PropsEx = (props) => {


        const menu = {'김밥':3000, '떡볶이':4000}

        return(
            <>
            <h1>{props.name}</h1>
            <ChildComponent name = {props.name} age={props.name === '홍길동'?20:25}/>
            <MenuPrint {...menu}/>

        );

    }

    export default PropsEx;

👀 3. 출력화면 

 

👀 전개 연산자(...) : 출력화면 3을 참고 하면된다!  ( 가장 큰 괄호가 벗겨진다!)

 

---

 

🤔💬 State : 컴포넌트의 상태 

React에서의 state란 컴포넌트 내부에서 관리되는 상태 값을 의미합니다. 
컴포넌트가 생성 되고, 갱신될 때마다 변경될 수 있는 값이며, 이 값이 변경될 때마다 화면이 다시 렌더링됩니다. 

state는 useState Hook을 사용하여 컴포넌트 내부에서 관리할 수 있으며, 
setState 함수를 통해 값을 업데이트할 수 있습니다.

 

💬  작성방법

const [inputValue,setInputValue] = useState("초기값");

- inputValue : 변수명 
- setInputValue  : inputValue 변수명의 setter 
- useState : inputValue 변수에 대입되는 초기값을 "초기값" 으로 지정

 

📚 VS code

📘 APP.js

/* import logo from './logo.svg'; */
import './App.css';

// components 폴더의 Exam1.js를 가져와서 사용
// 사용할 때 이름을 Ex1으로 지정
import Ex1 from './components/Exam1';
import Ex2 from './components/Exam2';
import PropsEx from './components/R01_props';
import State1 from './components/R02_state1';
import State2 from './components/R03_state2';

/* index.js에서 App을 부르고 있어! */
function App() {

  // 리액트의 컴포넌트는 딱 ! 하나의 요소만을 반환할 수 있다.
  // -> 여러 요소를 반환하고 싶다면 부모 요소로 묶어준다! 

  return (
    /* fragment(<></>) : 반환 요소를 감쌀 때 사용, 해석 X */
    <>
      {/* jsx 주석 */}
      <h1>Hello React!!</h1>
      <div>리액트 배운다!</div>

      {/* Ex1 랜더링 할거야! Ex1이 누구지 ? Exam1.js만들어! */}
      {/* <Ex1/> */}
      {/* <Ex2/> */}

      {/* <PropsEx name={'홍길동'}/> */}
      {/* <PropsEx name={'고길동'}/> */}

      <State1/>
      <State2 init={100}/>

    </>
  );
}

export default App;

 

📘 R02_state1.js

import React ,{useState} from "react";

const InputTest = () => {

    const [inputValue,setInputValue] = useState("초기값");
    const changeInputValue = (e)=>{ 
	     console.log(e.target.value);
    }

    return(

        <input type='text' value={inputValue}
         onChange={changeInputValue}/>

    );

}
export default InputTest;

💻 코드 분석 
1. const [inputValue,setInputValue] = useState("초기값");
    //    : 변수       : 함수  
    // inputValue : 값을 저장하는 변수 
    // setInputValue : inputValue에 값을 대입하는 setter역할의 함수
    
2.  <input type='text' value={inputValue} onChange={changeInputValue}/>    
       
        // 첫 렌더링 : value = "초기값"출력
        // -> input의 값을 변경(컴포넌트의 상태변화 -> 리랜더링 진행)
        //     1) onChange(값이 변했을 때)
        //    -> changeInputValue함수가 실행되면서 
        //       inputValue 에 e.target.value(변화된 값) 대입

        //     2) 컴포넌트의 상태 변화 -> 리렌더링 진행
        // 리랜더링 -> value = 변경된 inputValue의 값

👀 출력화면