React TIL 06

2021년 7월 12일에 작성된 문서 2번 입니다.
React 배운 내용을 정리했습니다.

이벤트 처리

onChange

• <input> <textarea> <select> 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데 사용.
• React 에서는 이러한 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state 로 관리하고 업데이트.

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

  const handleChange = (e) => {
    setName(e.target.value);
  }
  // onChange 이벤트가 발생하면 e.target.value를 통해 
  // 이벤트 객체에 담겨있는 input 값을 읽어올 수 있다. 


  return (
    <div>
      <input type="text" value={name} onChange={handleChange}>
      // onChange는 input의 텍스트가 바뀔 때 마다 발생하는 이벤트. 
      // 이벤트가 발생하면 handleChange 함수가 작동
      // 이벤트 객체에 담긴 input 값을 setState를 통해 새로운 state로 갱신
	  </input>
	  // 컴포넌트 return문 안의 input 태그에 value와 onChange를 넣었다. 
      <h1>{name}</h1>
    </div>
  )
};

onClick

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

// 위의 onChange 예시에 버튼을 추가
// 버튼 클릭 시 input tag 에 입력한 이름이 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>
  );
};

<select> & Pop up

• select tag 는 사용자가 drop down 목록을 열어 그 중 한가지 옵션을 선택하면, 선택된 옵션이 state 변수에 갱신.
• Pop up 역시 Pop up 의 open 과 close 를 state 를 통해 관리할 수 있다.

React 데이터 흐름

• React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다.
• 프로토타입에서 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다.
  • 즉, 상향식(bottom-up)으로 앱을 만든다.
  • 테스트가 쉽고 확장성이 좋다.
  • 디자인을 전달받고 나면, 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일.
  • 하나의 컴포넌트는 한가지 일만 한다.
• 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다.
  • 데이터를 전달하는 주체는 부모 컴포넌트가 된다.
  • 데이터 흐름이 하향식(top-down)임을 의미.

Written with StackEdit.