[React] State - Props - Event

Rookie·2022년 4월 15일
0
post-thumbnail

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>
profile
노력형 잡캐입니다

0개의 댓글