JS => React (map, 이벤트 처리)

map을 활용한 데이터 렌더링

map을 사용하지 않은 하드코딩

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can do it!" },
];
<br>
function Blog() {
  return (
    <div>
      <div>
        <h3>{posts[0].title}</h3>
        <p>{posts[0].content}</p>
      </div>
      <div>
        <h3>{posts[1].title}</h3>
        <p>{posts[1].content}</p>
      </div>
    </div>
  );
}

map을 사용한 코드

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can do it!" },
];
<br>
function Blog() {
<br>
  const blogs = posts.map((post) => (
    <div key={post.id}> // key 속성값은 가능하면 데이터에서 제공하는 id를 할당
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

위처럼 map을 사용할 때 요소에 "key"값을 주는 이유는
어떤 아이템이 변화되거나, 추가, 삭제되었는지를 알아차리기 위해서다.
key가 없어도 렌더링에는 이상이 없지만 React는 아래와 같은 경고를 띄운다.

"Each child in an array should have a unique “key” prop."

이벤트 처리 in React

HTML에서 이벤트 처리 방식

<button onclick="handleEvent()">Event</button>

React에서 이벤트 처리 방식

<button onClick={handleEvent}>Event</button> // 이벤트는 소문자 대신 카멜 케이스 사용

onChange

" input, textarea, select "와 같은 폼(Form) 엘리먼트는
사용자의 입력값을 제어하는데 사용된다.

React 에서는 이러한 변경될 수 있는 입력값을
일반적으로 컴포넌트의 state로 관리하고 업데이트 한다.

이벤트 객체에 담긴 input 값을 setState 를 통해 새로운 state 로 갱신

function NameForm() {
  const [name, setName] = useState(""); // setName으로 새로운 상태 변경
<br>
  const handleChange = (e) => {
    setName(e.target.value);
  }
<br>
  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

onClick

onClick 이벤트는 말 그대로 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트이다.
"button"이나 "a" 태그 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용하는 이벤트이다.

alert을 통해 알림창이 팝업되도록 하는 잘못된 예시 코드

function NameForm() {
  const [name, setName] = useState("");
<br>
  const handleChange = (e) => {
    setName(e.target.value);
  }
<br>
  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button> 
      <h1>{name}</h1>
    </div>
  );
};

위와 같이 onClick 이벤트에 alert(name) 함수를 바로 호출하면
컴포넌트가 렌더링될 때 함수 자체가 아닌 함수 호출의 결과가 onClick에 적용된다.

때문에 버튼을 클릭할 때가 아닌, 컴포넌트가 렌더링될 때에 alert가 실행되고
따라서 그 결과인 undefined (함수는 리턴값이 없을 때 undefined 를 반환한다.)가
onClick 에 적용되어 클릭했을 때 아무런 결과도 일어나지 않는다.

따라서 onClick 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라
아래 예시 코드와 같이 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후
이벤트에 함수 자체를 전달해야 한다.

단, 두 가지 방법 모두 arrow function 을 사용하여 함수를 정의하여야
해당 컴포넌트가 가진 state에 함수들이 접근할 수 있다.

예시 코드

// 함수를 정의하는 방법
return (
  <div>
	...
    <button onClick={() => alert(name)}>Button</button>
	...
  </div>
  );
};
<br>
// 함수 자체를 전달하는 방법
const handleClick = () => {
  alert(name);
};
<br>
return (
  <div>
      ...
    <button onClick={handleClick}>Button</button>
      ...
  </div>
  );
};