[REACT] 기본 문법_Props !

💡 React Props 문법

 

React에서 props(속성)은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방입니다. Props를 사용하면 컴포넌트 간의 데이터 흐름을 설정할 수 있습니다. 이것은 React 애플리케이션에서 컴포넌트들이 데이터를 공유하고 상호작용하는 방법을 제어하는데 중요합니다.

Props 전달하기

• <하위Component propName={value} />
• 여기서 propName은 자식 컴포넌트에서 사용할 수 있는 속성의 이름이고, value는 전달하고자 하는 값입니다.

Props 사용하기 - 자식 컴포넌트에서 props를 사용하는 방법

• function 자식Component(props) { return <div>{props.propName}</div>; }

또는 ES6의 구조 분해(destructuring)를 사용하여 **props**를 가져올 수도 있습니다

• function 자Component({ propName }) { return <div>{propName}</div>; }

 

React에서의 이벤트 핸들러

 

React에서 이벤트 핸들러는 사용자의 동작(클릭, 입력, 마우스 움직임 등)에 대응하여 특정 동작을 수행하는 함수를 의미합니다. 이벤트 핸들러는 React 컴포넌트의 메서드로 정의되고, 주로 사용자 상호작용을 다루는 데 사용됩니다.

React 애플리케이션에서 사용자의 입력이나 브라우저 이벤트가 발생하면, React는 해당 이벤트를 처리할 수 있는 핸들러 함수를 호출합니다. 이 핸들러 함수는 주로 사용자 인터페이스의 동적인 부분을 업데이트하고, 상태(state)를 변경하거나 컴포넌트를 재렌더링하여 사용자의 행동에 응답합니다.

• onChange( ) : 사용자 입력에 대한 반응을 처리하고 상태(state)를 업데이트하는 중요한 방법 중 하나입니다. 주로 폼 요소(텍스트 입력, 체크박스, 라디오 버튼 등)과 함께 사용됩니다

            <input type="text" onChange={/* input에 데이터가 입력되며 요소의 변경이 발생되었을 때 실행될 코드 */} />

            onChante((e) => {} )
            input에 입력된 데이터를 가져오고 싶을때 (e)로 입력 
            input 태그에서 발생하는 이벤트에 여러 기능이 담겨있음

 

• onClick( ) : 사용자가 요소를 클릭할 때 발생하며, 주로 버튼이나 링크와 함께 사용됩니다.
  
  
  

		const changeTitle = () => {
                    let copy = [...todo];
                    copy[0] = "스프링 인강 3개듣기"
                    copy[1] = "새싹 문제 3개씩 풀기"
                    copy[2] = "SqlD 문제 5개씩 풀기"
                    setTodo(copy);
                  }

                <button onClick={() => changeTitle}>글 제목 변경 버튼</button>