React

content = """# [React] useState로 사용자 입력값 처리하고 조건부 렌더링 구현하기

오늘은 리액트에서 가장 기본적이면서도 중요한 사용자 입력(Input) 처리와 조건부 렌더링을 활용해 간단한 자기소개 등록 페이지를 만들어 보았습니다.

---

오늘의 목표

• 사용자로부터 여러 개의 입력(Input)을 받는다.
• state를 통해 입력값을 실시간으로 관리한다.
• [등록하기] 버튼을 눌렀을 때만 결과 화면을 조건부 렌더링으로 출력한다.

---

핵심 개념 정리

개념	역할
useState	컴포넌트 내에서 변경되는 동적인 데이터(상태)를 저장하고 관리합니다.
onChange	사용자가 입력창에 타이핑을 할 때마다 이벤트를 감지하여 상태를 실시간으로 업데이트합니다.
조건부 렌더링 (&&)	특정 조건이 참(true)일 때만 화면에 UI를 렌더링합니다. 여기서는 등록된 데이터가 있을 때만 결과창을 보여주는 용도로 사용합니다.

---

코드 (App.jsx)

function App(){
  const [name, setName]=useState("")
  const [food, setFood] = useState("")
  const [feel, setFeel]= useState("")
  const [profile, setProfile] =useState(null)

function hand(){
  setProfile({
    name : name,
    food : food,
    feel : feel,
  })
}
  return(
    <>
    <h1>나만의 입력 폼</h1>
    <p>이름, 좋아하는 음식, 오늘의 기분을 입력해보세요.</p>
    <input type="text" value={name} onChange={(event) =>{
      setName(event.target.value)
    }}
    placeholder='이름을 입력하세요'  />
    
    <input type="text" value={food} onChange={(event) =>{
      setFood(event.target.value)
    }}
    placeholder='좋아하는 음식을 입력하세요'  />

<input type="text" value={feel} onChange={(event) =>{
      setFeel(event.target.value)
    }}
    placeholder='오늘의 기분을 입력하세요'  />

    <button onClick={hand}>등록하기</button>

    {profile &&(
      <div>
        <h2>{profile.name}</h2>
        <p>좋아하는 음식 : {profile.food}</p>
        <p>오늘의 기분 : {profile.feel}</p>
      </div>
    )}
    </>
  )
}
export default App

실행 창

오늘 생겼던 문제

터미널에서 입력하는 ""를 없이 써서 공백을 기준으로 앞에 있는 데이터만 저장됨