[💻 코드스테이츠 FE 44기] Props, State, Event

✔️ 시작

Props, State의 특징과 이를 활용한 이벤트 처리에 대해 학습했다.

---

📍배운 것

✔️ Props

• 변하지 않는 외부로 부터 전달 받은 값
• 부모 컴포넌트(상위 컴포넌트)로 부터 전달 받은 값
• props를 함수의 전달인자 처럼 전달 받아 이를 기반으로 화면에 어떻게 표시 되는지를 기술하는 React 엘리먼트를 반환(객체 형태로 반환)한다.
• props로 어떤 타입의 값도 넣어 전달 할 수 있도록 Props는 객체 형태를 가진다.
• props는 읽기 전용이다.
  - 외부로 부터 전달 받아 변하지 않는 값으로 함부로 변경될 수 없는 읽기 전용이다.(read-only)

Props 사용법

1. 하위 컴포넌트에 전달하려는 값(data)과 속성을 정의한다.
2. props를 사용해 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링 한다.

<parent>, <child> 컴포넌트를 선언한다.

• <parent> 컴포넌트 안에 <child> 컴포넌트를 작성한다.

function Parent(){
	return(
    	<div className="parent">
      		<Child />
      	</div>
    )
}

funtion Child(){
	return(
    	<div className="child"></div>
    )
}

1. {,} 사용
2. 문자열도 할당할 수 있다.(text)

<Child attribute={value} />
<Child text={"..."} />

3. <Parent>컴포넌트에 전달

function Child(props){
	return(
    	<div className="child"></div>
    )
}

4. 전달 후 props 렌더링 하기(props는 객체를 반환)

function Child(props){
	return(
    	<div className="child">
      		<p>{props.text}</p>
      	</div>
    )
}

props를 전달하는 또 다른 방법

props.children 사용하기

• 여는/닫는 태그 사이에 value를 넣어 전달한다.
• props.children 사용 시 해당 value에 전급해 사용할 수 있다.

function Parent(){
	return(
    	<div className="parent">
      		<Child>I'm Child</Child>
      	</div>
    )
}

function Child(props){
	return(
    	<div className="child">
      		<p>{props.children}</p>
      	</div>
    )
}

✔️ State(상태)

• 컴포넌트 내부에서 변할 수 있는 값
• state 사용 시 웹이 App처럼 동작할 수 있다.
  - 변경될 경우 HTML이 자동으로 재렌더링 된다.(새로고침 x)
• state 번수는 React에 의해 함수가 끝나도 사라지지 않는다.

state hook, useState

• useState 사용을 원할 경우 useState를 불러와야한다.(import)

import { userState } from "react"

문법 1

const [state에 저장할 변수, 현재 state를 갱신할 변수] = useState(state초기 값 할당)

function CheckboxExample(){
	const[isCheckde, setIsCheckde] = useState(false)
}

문법 2

const stateHookArray = useState(false);
const isChecked = stateHookArray[0];
const setIsChecked = stateHookArray[1];

• useState를 호출하면 배열을 반환한다.
  - 배열의 0번째 요소 : 현재 state 변수 값
  - 배열의 1번째 요소 : 해당 변수를 갱신할 수 있는 함수
  - useState의 인자 : state의 초기값
• 변수 대신 쓰는 데이터 저장 공간을 만든다.(array, objec인 경우)
• useSate()를 이용해 만든다.
• string, number, array, object 등 저장 가능

states는 값 변경을 함수 호출로 변경해야한다.(강제 x)

• 강제로 변경할 경우 리렌더링x, state가 제대로 작동 안될 수 있다.

변수와 차이점

• 변수는 값이 변경될 시 새로고침 된다.(재렌더링 x)
• state는 새로고침 없이 값이 변경된다. (렌더링 o)

자주 변경되는 중요한 데이터는 변수 대신 state로 저장한다.

✔️ 이벤트 처리

• 카멜케이스(camelCase) 방식으로 작성한다.
• JSX사용해 문자열이 아닌 함수로 이벤트 처리함수를 전달

<button onClick={hadleEvent}>...</button>

{hadleEvent()}처럼 ()가 있을 경우 해당 함수를 바로 실행한다는 뜻이다.

- onChange

• input의 텍스트가 바뀔 떄 마다 발생하는 이벤트

function NameForm(){
	const[name, setName] = useSate("");
  	const handleChange = (event) => {
    	setName(event.target.value);
    }
}

return(
	<input type="text" value={name} onChange={handleChange}></input>
  <h1>{name}</h1>
)

- onClick

• 사용자가 클릭 했을 경우 발생하는 이벤트
• onClick에 함수를 전달 할 경우 함수 호출이 아닌 리턴문 안에서 함수를 정의 하거나 리턴문 외부에서 함수를 정의 후 이벤트 함수 자체에 전달

return(
	<button onClick={() => alert(name)}></button>
)

{/*함수 자체를 전달한다. */}
const handleClick = () => {
	alert(name);
}
return(
	<button onClick={handleClick}>
)

---

✏️ 마치며

props와 state의 차이점은 알게되었지만
아직도 사용 방법이 이해 안 되는 부분이 몇가지 존재한다.

이해 안 되는 부분은 많이 코드를 작성하는 방법 밖에 없지 않을까 싶다.

또한 이벤트 처리는 Javascript와 비슷하면서 많이 다른 거 같다.
{함수()}, {함수} 이 두가지 차이점을 잘 알고 작성해야할 거 같다.