[React] State - Props - Event

State

쉽게말해 State는 변수다. ( 일반변수와 다르게 값이 변하면 렌더링이 일어나는 차이! )

• 값이 변하게되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 된다.
• props와 같이 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖는 객체지만, props는 (함수 매개변수) 컴포넌트에 전달되는 반면 state는 (함수내 선언된 변수처럼) 컴포넌트 안에서 관리된다.
• 함께 사용되는 함수는 setState이다. 이는 state 값을 변경해주는 함수이다.
• setState(3)을 하게 된다면 state 값은 3으로 변경되면서 렌더링이 되겠지만, state = 3이라고 하면 값은 변경이 되겠지만 렌더링이 되지 않는다.

(예시)const [state, setState] = useState("");

(내가 사용한 state)
const [id, setId] = useState('');
const [pw, setPw] = useState('');
const navigate = useNavigate();
const [button, setButton] = useState('');

Props

• props는 properties 의 줄임말
• 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할때 props를 사용
• props를 넣으면 객체가 나온다
• () → 표현식

App 컴포넌트에서 Hello 컴포넌트를 사용할때, name 이라는 값을 전달해 주고싶다 가정하고 코드작성!

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

• 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회가능
• props는 객체 형태로 전달 - 만약 name값을 조회하고 싶다면 props.name을 조회

Event

• onClick - 클릭했을때 반응

• onSubmit - 클릭했을때 보내

• Includes - (ex. include (’@’) 로그인 유효성 검사할때 사용

• 개발환경이 최종적으로 Html이 이해할 수 있도록 바꿔준다.(Converting)

<form onSubmit={handleSubmit}>
<input
className="LoginId"
type="text"
placeholder="전화번호,사용자 이름 또는 이메일"
onChange={handleIdInput} // event
              />
<input
className="PassWord"
type="text"
placeholder="비밀번호"
onChange={handlePwInput} // event
              />

function Header(props) {
return <Header>
<h1><a href="/" onClick={function(event){
event.preventDefault();//새로고침 방지
}}>(props.title)</a></h1>
</header>