예습 (React State & Props)

1.넣고싶은 컴포넌트 <Hello/>가 있다고 가정하고 여기에 성별을 넣어주고 싶다면 gender={'man'}처럼 특정 값을 <Hello gender={'man'} /}처럼 추가해 준 후 정의된 Hello컴포넌트의 전달인자로 넣어준다. Hello(props){return(<div>{props.gender}</div>)}를 넣어주는 경우 Hello 컴포넌트를 사용할 경우 정의된 'man'이 출력되며 이 값은 변경할 수 없다.


2. props를 변경하고 싶다면(변경할 수 없다) props로 받아온 값을 useState를 이용해 state로 변경해준 후 특정 기능들에 변경되는 함수들을 추가해 state값을 바꿔줄 수 있다.
예를 들면 아래처럼 선언한 뒤 하단의 내용을 원하는 위치 또는 기능을 넣어준다.
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
const [name, setName] = useState('Happy');//함수(컴포넌트)최상단(return 위)에 선언
<button onClick={() => {setName(name === 'Happy' ? 'Programmer' : 'Happy'}}>

또는 숫자의 경우 아래와 같이 사용한다
const [age, setAge(함수명)] = useState(props.age) //리턴 위 최상단 위치
<button onClick={() => {setAge(age + 1)}} //클릭 시 나이 증가


3. props는 아래와 같은 방식으로 내용을 추가(여러개 가능)할 수 있으며 props만 받아서 출력하는 경우 props가 없는 컴포넌트를 호출하는 경우 아무런 출력이 없다.
function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} sta={'asd'} />
      <Child /> // 의미없는 문자열(아래에서 props에서만 받아갔기 때문에)
    </div>
  );
}

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

export default Parent;


4. 위의 state를 사용하는 방식에는 사실 useState가 필요한데 import가 되지 않았다. import { useState } from "react";로 수입해줘야한다.


5.React에서는 JS와는 다르게 카멜 케이스와 함수전달이라는 방식으로 이벤트를 처리한다.
XXXXXX<button onclick="handleEvent()">Event</button>같은 방식이 아닌
OOOOOO<button onClick={handleEvent}>Event</button> 방식으로 사용해야한다.


6.호출등의 값들을 할당할 경우 랜더링 되면서 변경된 값(state)가 아닌 처음에 할당된 값이 <button onClick={alert(name)}>Button</button>이 name에 들어가므로 초기설정값 또는 undefined(설정값이 없는 경우)가 팝업될 수 밖에 없는데 이를 방지하기 위해서는  <button onClick={() => alert(name)}>Button</button> 처럼 내부에서 함수를 정의해주거나 컴포넌트 내부에 const handleClick = () => {alert(name)}등을 정의해준 후 <button onClick={handleClick}>Button</button>와 같은 방식으로 함수자체를 호출해줘야 시행 당시의 값을 평가해 반환해준다.


7.state는 꼭 필요한 부분에만 적용해야 하기 때문에 다음과 같은 질문들로 state로 만들어야 하는지에 대한 체크를 할 수 있다. 
- 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
- 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.


8.props.children은 props의 특별한 속성으로, 컴포넌트의 여는 태그와 닫는 태그 사이(HTML content 자리)의 내용을 포함합니다.  <-- 아주 신기한 내용이었다..

 

 

state, props는 재미있고 유용한 기능들인 것 같다.

조금 더 복잡할 수 있었던 내용들이 압축되서 각 컴포넌트 내부에서 돌아가는 유용한 기능같다.

또한 일정한 컴포넌트를 반복사용하는 경우 반복컴포넌트들의 생성에 키값을 순차적으로 주고 필요한 데이터들만 props로 분배한다면 내부 데이터도 쉽게 교체할 수 있을 것 같다.