[실무] 03. React 이벤트·State·Props·map()

React JS 실무

React 입문 (3) — 이벤트·State·Props·map(): 데이터 흐름이 보이면 쉬워집니다

클릭/입력 이벤트 처리부터 상태 관리(useState), Props 전달, 리스트 렌더링(map)까지 한 번에 이어서 정리합니다.

범위 기초 핵심 state·props 패턴 리스트 렌더링

이벤트 → state 변경 → 재렌더링(개념도)

1) 이벤트는 “함수를 전달”하는 방식입니다

React 이벤트 핸들러는 보통 onClick, onChange처럼 camelCase를 사용합니다. 중요한 점은 함수를 호출하는 것이 아니라, 함수 자체를 전달한다는 것입니다.

function Hello() {{
  function showName() {{
    console.log("Mike");
  }}

  return (
    <button onClick={{showName}}>Show name</button>
  );
}}

주의
onClick={"{showName()}"}처럼 괄호를 붙이면 렌더링 시점에 즉시 실행될 수 있습니다.

2) State(useState): “화면을 바꾸는 값”은 상태로 관리합니다

import {{ useState }} from "react";

export default function Counter() {{
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{{count}}</p>
      <button onClick={{() => setCount(count + 1)}}>+1</button>
    </div>
  );
}}

• state가 바뀌면 해당 컴포넌트는 다시 렌더링됩니다.
• 객체/배열 state는 새 객체로 만들어 업데이트하는 습관이 중요합니다.

3) Props: 데이터는 “위에서 아래로” 내려옵니다

React의 기본 데이터 흐름은 상위 → 하위입니다. 하위 컴포넌트는 받은 값을 화면에 그리는 역할을 맡습니다.

function Profile({{ name }}) {{
  return <p>안녕하세요, {{name}}님</p>;
}}

export default function App() {{
  return <Profile name="바나나 쿠키" />;
}}

4) map()으로 리스트 렌더링하기(더미 데이터 포함)

목록 화면(테이블/리스트)은 실무에서 가장 자주 등장합니다. 핵심은 key입니다.

const days = [
  {{ id: 1, title: "Day 1" }},
  {{ id: 2, title: "Day 2" }},
];

export default function DayList() {{
  return (
    <ul>
      {{days.map(day => (
        <li key={{day.id}}>{{day.title}}</li>
      ))}}
    </ul>
  );
}}

팁
key는 index보다 “변하지 않는 고유값(id)”을 권장드립니다.

트러블슈팅 체크

• 버튼을 눌러도 화면이 안 바뀐다면 → state가 아닌 일반 변수로 관리하고 있지 않은지 확인해 주세요.
• 리스트가 이상하게 갱신된다면 → key가 안정적인 값인지 확인해 주세요.
• props가 undefined라면 → 컴포넌트 호출부에서 값을 전달했는지 확인해 주세요.

참고 링크

• React: State 관리
• React: 이벤트 처리
• React: 리스트 렌더링
• DoLearn 커리큘럼(강의 목록)