[C/F TIL] 29일차 - react props, state

Code States
Front-end boost camp
Today
I
Learned

🍊 월요팅! 5월 22일, 29일차 수업

---

🍊 React State & Props

• state : 살면서 변할 수 있는 값(상태)
  -- 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값
• props : 외부로부터 전달받은 값
• ex) 통상적인 개념으로 생각 했을 때!
  -- 이름, 성별 -> props
  -- 취업여부, 결혼 또는 연애 여부 등 -> state

🍊 Props

• 컴포넌트의 속성(Property)
• javascript함수와 클래스, props를 함수의 전달인자(argument)처럼 던달받아 이를 기반으로 화면에 어떻게 표시되는지 기술하는 React엘리먼트를 반환
• 객체 형태
  -- 어떤 타입의 값도 넣어 전달할 수 있음
• 읽기 전용(read-only)
  -- 외부로부터 전달받아 변하지 않는 값
  -- 함부로 변경되면 안 되기 때문
  -- 개발자가 의도하지 않은 side effect 방지

🍊 Props 사용법

• 1) 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. ->
• 2) props를 이용하여 정의된 값과 속성을 전달한다. ->
• 3) 전달받은 props를 렌더링한다.

▼ 컴포넌트 선언

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

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

▼ HTML 속성과 값 다루는 법

<a href="www.codestates.com">Click me to visit Code States</a>

▼ React에서 JSX 속성 및 값을 할당하는 방법1

<Child attribute={value} />

▼ React에서 JSX 속성 및 값을 할당하는 방법2

<Child text={"I'm the eldest child"} />

▼ Child 컴포넌트에서 props 매개변수 사용 예시

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

▼ Child 컴포넌트에서 props.text 렌더링 예시

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

🍊 State

• 컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다룸

🍊 State 사용법

• 1) React에서 state를 다루는 useState 함수 불러오기
• 2) usestate를 컴포넌트 안에서 호출
  -- 변수 이름은 아무 이름이나 가능
  -- 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않음

// useState 문법예시

function CheckboxExample() {
// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라 부르겠습니다.
  const [isChecked, setIsChecked] = useState(false);
}

// useState 구조 분해 할당 예시

function CheckboxExample() {
  // 1번 코드를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); // 1번

  //...

  // 2번 코드와 같습니다.
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

• 3) useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state변수이고 1번째 요소는 이 변수를 갱신할 수 있는 함수
  -- useState의 인자로 넘겨주는 값은 statedml chrltrkqt

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

• 4) useState 문법 사용하여 코드 작성하기
  -- isChecked : state를 저장하는 변수
  -- setIsChecked : state isChecked를 변경하는 함수
  -- useState : state hook
  -- false : state 초깃값

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  // const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);

• 5) 이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용
  -- isChecked는 boolean값을 가지기 때문에 true 또는 false 여부에 따라 다른 결과가 보이도록 삼항연산자 사용

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

🍊 State 사용 시 주의점

• React 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링됨
• React state는 상태 변경 함수 호출로 변경해야함
  -- 강제로 변경 시도하면 안됨!!
  -- 강제로 변경 시도 시, 리렌더링이 되지 않거나 state가 제대로 변경되지 않는다.

🍊 이벤트 처리

• onChange : input, textarea, selec와 같은 폼 엘리먼트는 사용자의 입력값을 제어하는 데 사용
  -- 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

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

• onClick : 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트
  -- input 태그에 입력한 이름이 alert를 통해 알림 창이 팝업되도록 하는 코드 (하단)

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

-- onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의한 후 이벤트에 함수 자체를 전달해야 함

// 함수 정의하기

return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};

// 함수 자체를 전달하기

const handleClick = () => {
  alert(name);
};

return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};

... 외 필요한 이벤트 함수는 그때그때 찾아 써야할듯

🍊 29일차 수업을 마치며...

개념 주워먹기 벅찼던 오늘 수업~~ 저녁에 리액트 지난 실습 복습 + 내일 페어 프로그래밍을 위한 고민의 시간이 필욧!