[TIL] D+54 리액트 잘하는 사람 나였으면...

1️⃣ 리액트 입문 2주차

props가 너무 어려워요2222

📌 props 추출

props 추출이란 컴포넌트가 받은 props 중에서 필요한 특정 값만 꺼내서 사용하는 것을 말한다.

props 추출을 사용하며 코드의 가독성이 더 좋아지며 반복적으로 사용되는 proprs를 쉽게 재사용할 수 있다.

 

<Props를 추출하여 활용하는 여러가지 방법>

1. 구조 분해 할당과 props

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript의 표현식이다.

function Greeting({ name }) {
  return <h1>안녕, {name}!</h1>;
}

function App() {
  return <Greeting name="철수" />;
}

 

{name}을 사용하여 props.name이라고 길게 적지 않아도 객체에 접근 가능하다.

 

2.Default arguments

Default arguments는 함수의 매개변수에서 기본값을 설정하는 자바스크립트의 표준 기능

컴포넌트가 부모로부터 특정 props를 받지 못했을 경우에도 에러 없이 기본값을 사용하여 컴포넌트를 렌더링할 수 있게 해준다.

function Welcome({ name = "Guest" }) {
    return <h1>Welcome, {name}!</h1>;
}

 

name = "Guest"는 name prop이 전달되지 않았을 때, "Guest"라는 기본값을 사용하도록 설정한다.

이렇게 설정함으로써 부모 컴포넌트에서 name prop을 제공하지 않아도 Welcome 컴포넌트는 "Welcome, Guest!" 라는 문구를 표시할 수 있다.

---

📌 State

const [name, setName] = useState("처음값");

 

리액트에서는 어떠한 값을 변경해야할 때 State를 사용해야한다.

state란 컴포넌트 안에서 변할 수 있는 값이다.

이렇게 useState라는 훅을 사용해서 state를 만들 수 있다.

---

📌 useState + onClick event

import { useState } from "react";

const App = () => {
  const [name, setName] = useState("겨울");
  const handleNameChange = () => {
    setName("봄");
  };

  return (
    <div>
      <h1>React State</h1>
      <button onClick={handleNameChange}> 봄으로!! </button>
      {name}
    </div>
  );
};

export default App;

 

원래라면 const name = "겨울"로 썼을 코드가 useState를 사용했기 때문에

const [name, setName] = useState("겨울"); 이라는 형식으로 쓰였다...

 

위 코드를 실행해봅시다...

"봄으로!!" 버튼을 누르면...

봄이 됩니다... 짠...~~

---

📌 useState + onChange event

강의에 나온 예시는 너무나도 이해가 안되어서 지피티의 도움을 받아보았다...

 

사용자가 입력한 값을 실시간으로 화면에 보여주는 것이 이 조합(?)을 사용하는 목표이다.

사용 예시로는 사용자 이름,이메일 입력받기,실시간 검색창,채팅앱의 입력창 등이 있다.

import React, { useState } from 'react';

function Greeting() {
  // 1. state로 입력값 관리하기 (초기값은 빈 문자열 "")
  const [name, setName] = useState('');

  // 2. 입력값이 바뀔 때 실행될 함수
  const handleChange = (event) => {
    setName(event.target.value); // 입력값을 state에 저장
  };

  return (
    <div>
      <h1>입력된 이름을 실시간으로 보여줍니다!</h1>
      <input 
        type="text" 
        placeholder="이름을 입력하세요" 
        value={name} // 입력창의 값은 state와 연결
        onChange={handleChange} // 입력값이 바뀔 때 실행
      />
      <p>안녕하세요, {name}!</p>
    </div>
  );
}

export default Greeting;

 

1.useState를 사용하여 상태 관리

const [name, setName] = useState('');는 name이라는 상태(state)를 만들어서 입력값을 저장한다.

setName은 name을 업데이트 하는 함수이다.

 

2.onChange 이벤트

onChange={handleChange}는 입력창에서 뭔가를 입력할 때마다 handleChange 함수를 실행한다.

handleChange 함수는 event.target.value로 입력값을 가져와 name 상태에 저장한다.

 

3.실시간 반영

입력한 값이 name에 저장되면 <p> 태그에 있는 {name}이 즉시 업데이트 된다.

입력창의 value={name}은 state와 입력창을 연결해주는 역할을 한다.

 

위 코드를 실행해보면 이러한 결과물이 나온다

우와 신기하다