React State

1. 컴포넌트와 프로퍼티

• 컴포넌트(Component)
  • 리액트를 이루는 앱의 최소단위이다.
  • 대문자로만 시작해야한다.
    • 이유 : 기존 HTML 태그(DOM요소)와 구분을 하기 위해서
       
  • 내가 직접 커스텀하는 나의 태그
     
• 프로퍼티 (Props)
  • 상위컴포넌트가 하위컴포넌트로 값을 전달할때 사용한다.
    • <컴포넌트이름 key="value"/>
       
  • 상위 컴포넌트에서 보낸 데이터를 하위 컴포넌트에서 받는 방법
    • 함수의 형태이기 때문에, 값은 매개변수를 통해서 받는다
    • 매개변수 </div classname = "key">
       
  • 상위 컴포넌트에서 값을 입력하고 하위 컴포넌트에서 값을 읽어온다.

 

 

- React Event

• return 문 안에 DOM 요소에 이벤트 속성 : onClick={함수이름}
• 만약 함수 이름이 따로 없고, 바로 작성하고 싶은 경우?
  • onClick = { ( ) => { } }
     
• DOM 요소에만 이벤트 걸 수 있고, 내가 만든 컴포넌트에는 이벤트를 걸 수 없다.
  • 가능 </div onclick = { } >
  • 불가능</menubox onclick = { } >

 

 

 

2. State

• 컴포넌트 내부에서 관리되는 변경이 가능한 데이터
• const[state, setState] = useState(초기값)
• import 작업 
  • import{useState} from 'react';
     
• state 선언
  • const[변수이름, set변수이름] = useState(초기값)
     
• 사용
  • state 값 변경시 : set 변수이름(변경값)

 

 

- State와 변수의 차이점

• state는 일반 변수와 다르게 값이 변하면 화면이 렌더링된다.
• JS에서 값이 변하는 과정을 고려한다면, 마지막에 화면 렌더링이 들어가야 한다.
• setState() 함수를 이용

	let num = 0;
	const ck1 = ()=>{
		console.log('ck1 function')
		num += 1;
		console.log('현재숫자',num)
	}
    
    
	const [num2, setNum2] = useState(0)
	const ck2 = () => {
		setNum2(num2 + 1);
	}
	const ck3 = () => {
		setNum2(num2 - 1);
	}

 

<div>
        <p>일반 변수: {num}</p>
        <button onClick={ck1}>일반 변수 버튼</button>
        
        <p>state: {num2}</p>
        <button onClick={ck2}>state + 버튼</button>
        <button onClick={ck3}>state - 버튼</button>
</div>