[React] State, Props

State

import React, { useState } from 'react';

 const [글제목, 글제목변경] = useState([]);
 
 <h4>{ 글제목 }</h4>

• state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링 

let [ 따봉, 따봉변경 ] = useState(0);

state만들 때 2개까지 작명할 수 있댔는데, 두번째 작명한건 state 변경을 도와주는 함수

따봉변경(새로운state)

예시

function App(){
  
  let [ 따봉 ] = useState(0);
  return (
    <h4> { 글제목[0] } <span onClick={ ()=>{ 따봉 = 따봉 + 1 } } >👍</span> { 따봉 }</h4>
  )
}

* ... :  배열 벗기기 

 

Props

 

props로 부모 -> 자식 state 전송하는 법 

• 1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} /> 
• 2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

 

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

• 1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} /> 
• 2. 자식컴포넌트 만드는 곳에 가서 props라는 파라미터 등록 후 props.작명 사용하면 됩니다.