[REACT] 기본문법

 React의 이벤트 핸들러

 

React에서 이벤트 핸들러를 다룰 때, 보통 다양한 이벤트 핸들러를 사용할 수 있습니다.

   1. `onClick` 이벤트 핸들러

    onClick 이벤트 핸들러는 **사용자가 클릭할 때 실행됩니다. 아래의 예시에서 handleClick 메서드는 버튼이 클릭될 때 호출됩니다

			import React from 'react';
			
			const Component = () => {
			  const handleClick = () => {
			    console.log('Button clicked!');
			  };
			
			  return <button onClick={handleClick}>Click Me</button>;
			};
			
				export default Component;

 

2. onChange 이벤트 핸들러

		import React, { useState } from 'react';
		
		const Component = () => {

		  const [inputValue, setInputValue] = useState('');
		
		  const handleChange = (event) => {
		    setInputValue(event.target.value);
		    console.log('입력 값이 변경되었습니다:', event.target.value);
		  };
		
		  return <input type="text" value={inputValue} onChange={handleChange} />;
		};

 

 

onChange 이벤트 핸들러는 사용자가 입력 필드나 선택 옵션을 변경할 때 실행됩니다. 아래의 예시에서 handleChange 메서드는 입력 필드의 값이 변경될 때 호출됩니다

3. onSubmit 이벤트 핸들러

		import React from 'react';
		
		const Component = () => {
		  const handleSubmit = (event) => {
		    event.preventDefault();
		    console.log('제출 완료 !');
		  };
		
		  return (
		    <form onSubmit={handleSubmit}>
		      <button type="submit">Submit</button>
		    </form>
		  );
		};

 

onSubmit 이벤트 핸들러는 폼(form)이 제출될 때 실행됩니다. 아래의 예시에서 handleSubmit 메서드는 폼이 제출될 때 호출됩니다

 

---

💡 State의 특징

 

🌟 React에서 상태를 업데이트할 때, 새로운 상태를 만들기 위해 불변성(Immutability)을 유지해야 합니다. 이렇게 함으로써 React는 상태의 변화를 감지하고 적절한 업데이트를 수행할 수 있습니다.

만약 기존 상태와 새로운 상태가 동일하다면(값이 같다면), React는 이를 최적화하여 렌더링을 방지할 수 있습니다. React에서 상태를 업데이트할 때
상태 변경 함수에 전달하는 인자가 이전 상태와 동일하다면, React는 렌더링을 건너뛰어 성능을 최적화합니다.

그러나 주의해야 할 점은 객체나 배열과 같은 복합 데이터 타입을 다룰 때입니다. 객체나 배열은 참조 타입이기 때문에 동일한 내용을 가지더라도 메모리에 저장된 위치가 다를 수 있습니다.
따라서 객체나 배열의 경우 새로운 객체 또는 배열을 생성하여 업데이트해야 합니다.

const [user, setUser] = useState({ name: '푸바오', age: 10 });

const handleAgeChange = () => {
  setUser({ ...user, age: user.age + 1 }); // 이전 상태와 동일한 내용을 갖는 새로운 객체를 생성하여 업데이트합니다.
};

 

위의 코드에서 setUser({ ...user, age: user.age + 1 })는 이전 상태의 내용을 유지한 새로운 객체를 생성하면서 나이 필드를 업데이트합니다. 이렇게 하면 React는 상태가 실제로 변경되었음을 감지하고 렌더링을 수행합니다.

 

---

Spread Operator (스프레드 연산자)

 

[...data]는 JavaScript의 스프레드 연산(Spread Operator)입니다. 이 연산자는 배열이나 객체의 요소들을 개별 요소로 분해하거나 복사할 때 사용됩니다.

React에서 주로 사용되는 상황 중 하나는 상태(State)나 프로퍼티(Props)를 업데이트할 때 이 연산자를 사용하여 배열을 수정하는 것입니다.

  ✍️ 배열에 새로운 요소를 추가하거나 기존 요소를 제거하면서 배열을 변경하고 싶을 때 확산 연산자를 사용할 수 있습니다.**

    const newData = [...data, newItem];

위 코드는 data 배열의 모든 요소를 펼쳐서(...data) 새로운 배열을 생성하고, 그 뒤에 newItem을 추가한 새로운 배열을 만듭니다. 기존 배열 data를 변경하지 않고 새로운 배열을 생성하는 것이기 때문에 불변성(Immutability)을 유지하게 됩니다.

 

또한, 배열에서 요소를 제거하고 싶을 때도 확산 연산자를 사용할 수 있습니다. 예를 들어, 특정 요소를 제거한 새로운 배열을 생성하고자 할 때는 다음과 같이 사용할 수 있습니다

   ✍️ data 배열에서 idToRemove와 일치하지 않는 요소들만 남겨서(filter 함수를 사용) 새로운 배열을 생성합니다.**

        const updatedData = data.filter(item => item.id !== idToRemove);

 

스프레드 연산자는 객체에서도 사용할 수 있습니다. 객체의 속성을 복사하거나 새로운 속성을 추가하고자 할 때 사용됩니다. 객체에서의 사용법은 다음과 같습니다

const originalObject = { key1: 'value1', key2: 'value2' };
const updatedObject = { ...originalObject, newKey: 'newValue' };

✍️ originalObject 객체의 모든 속성을 복사하여(...originalObject) 새로운 객체를 생성하고, 
    그 뒤에 newKey와 newValue 속성을 추가한 새로운 객체를 만듭니다.