49 :: Props, State, 이벤트

엘리스 SW 엔지니어 트랙 49일차

온라인 강의날

 

 

Props(Properties)

Component에 원하는 값을 넘겨줄 때 사용

모든 JavaScript 요소 넘겨줄 수 있다

컴포넌트 재사용을 위함

Props 값 변경하지 말자! 렌더시 문제 일어날 수 있다고 한다

 

 

State

컴포넌트 내에서 변하는 값을 관리

개발자 의도, 사용자 입력에 따라 새로운 값으로 변경

State 값이 변하고 재렌더링 필요시 리액트가 자동으로 변경된 부분 렌더링

 

주의사항

State 값은 직접 변경하지 말자

=> setState 함수 사용

 

State 변경 방법

setState 내에 변경할 값 넣기

useState(초기값)

const [ count, setCount ] = useState(0)
setCount(count + 1)

 

setState에 함수 넣기

매개변수가 들어오면 현재 값이 들어온다

const [ count, setCount ] = useState(0)
setCount((current) => {
  return current + 1
})

 

Object를 갖는 State 만들 때

const [ user, setUser ] = useState({ name: '민수', grade: 1 })
setUser((current) => {
  // 기존 오브젝트 복사해서 새로운 오브젝트 만들어준다
  const newUser = { ...current }
  newUser.grade = 2
  return newUser
})

 

 

setState와 객체 그리고 배열

객체나 배열의 값을 setState로 변경할 때

객체나 배열의 값이 변하는거지, 자체가 변하는게 아니기 때문에

React에서 State값 변경으로 인식하지 않는다.

그럼 재 렌더링도 안되는 것이다

=> 새 객체나 배열을 만들어서 return을 해주면 된다

 

 

이벤트

유저의 행동, 개발자의 의도에 의해 발생

=> 자바스크립트로 대응

 

이벤트 처리 방법

핸들링 함수 선언 방법

// 핸들링 함수 선언
const App() => {
  const handleClick = () => {
    alert("클릭했습니다.")
  }
  
  return (
    <div>
      <button onClick={handleClick}>클릭</button>
    </div>
  )
}

 

익명 함수

const App = () => {
  return (
    <div>
      <button onClick={() => { alert('클릭했습니다.') }}>클릭</button>
    </div>
  )
}

 

event object를 이용하면 편리하다
event.target은 이벤트가 일어난 엘리먼트

 

자주 사용하는 DOM 이벤트

• onClick
• onChange
• onKeyDown, onKeyUp, onKeyPress
• onDoubleClick
• onFocus: Element에 Focus 되었을 때
• onBlur: Element가 Focus를 잃었을 때
• onSubmit

event 객체 링크 => https://developer.mozilla.org/en-US/docs/Web/API/Event

 

 

다른 컴포넌트에서 이벤트 받아서 전달

부모 컴포넌트에서 이벤트를 받아와서 사용가능

즉 Props로 전달 받는다는 것

 

 

 

참고 링크

React key를 index로 주지 말자 => https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318