Code States 19~20일차

오늘의 키포인트

리액트- Props, State

나의 이해

Props : 외부로부터 전달받은 값 // 바꾸기 힘든 값

State : 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 // 내부에서 변화하는 값
  변경되면 리렌더링됨 상위 컴포넌트도

문법 및 중요

ex)

Props : 이름, 성별 // 바꾸기 힘든거
State : 나이, 주소, 취업 여부, 결혼 여부

 

Props 특징
컴포넌트의 속성(property) 의미
상위 컴포넌트로부터 전달받은 값 // 컴포넌트가 최초 렌더링 될때 화면에 초기값으로 사용가능
객체 형태 // 어떤 타입 값도 받기 위해서
읽기 전용 // 변경 막기 위해

React에서 속성 및 값 할당
<Child attribute={value} /> // text라는 속성 선언

1번 방법

텍스트 할당해보기  // 이건 변수나 문자열 둘다 {}
<Child text={"I'm the eldest child"} /> // 이 속성에 문자열 할당 해서 Child에 전달
렌더링
<p>{props.text}</p> // props 렌더링 //하위 컴포넌트에 씀
2번 방법
할당  // 이건 문자열은 그냥 쓰고 변수는 {}
<Child> I'm the eldest child</Child>
렌더링
<p>{props.children}</p>

 

State
useState 함수
import{useState} from “react”;  // 불러오기
useState 호출하기 // 호출한다는것은 state변수를 선언하는 것 (이름은 맘대로)

 

const [state 저장 변수, state 갱신 함수] = sueState(상태 초기 값)

배열의 첫 요소는 현재 state변수 두번째 요소는 이 변수를 갱신 할 수 있는 함수

 

isChecked라는 state 변수 선언을 할때 

const[isChecked, setIsChecked] = useState(false)

이것을 구조 분해를 해보면

const stateHookArray = useState(false)

const isChecked = stateHookArray[0]

const setIsChecked = stateHookArray[1]

 

일반적인 사용법

const[isChecked, setIsChecked] = useState(false) // useState 선언

const handleChecked = (event) => { // 이벤트 핸들러 함수 선언
  setIsChecked(event.target.checked) // checked나 value 값이 많이 쓰임

} //

<input ~~ onChange={handleChecked} />

 

만약에 이벤트 핸들러 함수가

const handleClick = () =>{

  alert('hi')

}

라면

<button onClick = {handleClick}>Button</button>  // 방법 1

<button onClick = {() => alert('hi')}>Button</button> // 방법 2

방법 1처럼 만들어진 함수를 호출하든지 방법 2처럼 직접 정의해서 써도 된다

 

onClick 이벤트에 그냥 넣으면 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결과가 적용되서 undefined가 나온다 그런새 리턴문 안에서 함수를 정의하거나 밖에서 정의 후 이벤트에 함수 자체를 전달해야함 (둘다 화살표 함수를 써야한다)