[TIL] 2021.10.12 TUE

유가연·2021년 10월 12일

TIL

목록 보기

7/32

Props와 State

Props

기본적으로 Component와 원하는 값을 넘겨줄 때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없음. 주로 Component의 '재사용'을 위해 사용함.

또한 props는 읽기 전용. 임의로 변경해서 사용하지 말자. props값을 변경하고 싶다면 값을 복제해서 새로운 변수를 만들자.

DOM Element Attributes

(1) 기본적인 DOM Element들의 Attribute는 camel case로 작성

(2) 'data-','aria-'는 예외

(3) HTML과 달리 class는 className으로 for는 htmlFor로 작성

($) HTML의 stlye은 string으로 작성하지만 여기서는 object로 작성

(6) Attribute(key)는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 함. 배열안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없음. 두 개의 다른 배열을 만들 때 동ㅇ리한 key를 사용할 수 있음.

State

Component 내에서 유동적으로 변할 수 있는 값을 저장. 개발자가 의도한 동작에 의해 변할 수도 잇고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있음. State 값이 변경되고 재렌더링이 필요할 경우 React가 자동으로 계싸한여 자동으로 변경된 부분만 렌더링 함.

State값을 직접 변경하게 되면 React가 Component를 다시 렌더링할 타이밍을 알아차리지 못함. 반드시 setState 함수를 이용해 값을 변경해야함.

Set State 값을 변경하는 두 가지 방법

(1) setState 내에 변경할 값을 넣기

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

(2) setState에 함수를 넣기

const [count, setCount] = useState(0);
setCount((current) => {
return current + 1
})
// 콜백함수를 넣을 경우 매개변수로 현재값을 받음.

(3) object나 array값 변경

object 자체를 바꿔버려야함.

Untitled

이벤트 처리

이벤트 소개

웹 브라우저가 알려주는 html 요소에 대한 사건의 발생.유저의 행동에 의해 발생할 수도 있으며 개발자가 의도한 로직에 의해 발생할 수도 있음. 이렇게 발생된 이벤트를 자바스크립트로 대응할 수 있음.

이벤트 처리(핸들링) 방법

(1) 핸들링 함수 선언 : 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법

const App = () => {
	const handleClick = () => {
		alert("클릭했습니다.");
	}
	return (
		<div>
			<button onClick={handleClick}>클릭하세요</ㅠㅕㅅ새ㅜ>
		<얖>
	):
};

(2) 익명 함수로 처리 : 이벤트를할당하는 부분에서 익명 함수를 작성

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

: DOM Element의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달함. 이벤트 object를 이용하여 이벤트 발생 원인, 이벤트가 일어난 Element에 대한 정보를 얻을 수 있음.

ex) event.target 은 이벤트가 일어날 엘러멘트. setState와 이 이벤트를 결합하면 사용자가 입력한 값을 state에 저장하는 로직을 짤 수도 있음

ocClick   // Element를 클릭했을 때
onChange   // Element의 내용이 변경되었을 때(input의 텍스트를 변경, 파일 선택 등)
onKeyDown, onKeyUp, onKeyPress   // 키보드 입력이 일어났을 떄
onDoubleClick   // Element를 더블 클릭했을 떄
onFocus   // Element에 Focus되었을 때
onBlur   //Element가 Focus를 잃었을 때
onSubmit   // Form Element에서 Submit 했을 때

컴포넌트 내 이벤트 처리

DOM 버튼 클릭

event.target 은 event의 원인이 되는 Element를 의미함.

const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);

import React, { useState } from 'react';

function App() {

  const [person, setPerson] = useState({
    name: "김민수",
    school: "엘리스대학교"
  })
  
  const handleChange = (event) => {
		// 여기서 name, value는 input 속의 것
    const {name, value} = event.target;
    setPerson((current)=>{
        const newPerson = {...current};
				// 여기서 name은 input의 name=""의 값. 그래서 name, school 이 올 수 있는 것
				// value는 person.name, person.school이 됨. 곧 출력값.
        newPerson[name] = value;
        return newPerson;
    })
    
  }
  
  const whenClick = () => {
    alert(`${person.name}님은 ${person.school}에 재학중입니다.`)
  }
  
  return (
    <div className="App">
        <input name="name" value={person.name} onChange={handleChange}/>
        <input name="school" value={person.school} onChange={handleChange}/>
        <button onClick={whenClick}>클릭</button>
    </div>
  );
}

export default App;

다른 컴포넌트로 이벤트 전달

컴포넌트 외부에서 부모 컴포넌트로부터 이벤트 핸들링 함수를 가져와서 처리할 수 있음.

Hook

함수 컴포넌트의 꽃

Hooks 개요

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용. useState가 바로 State Hook.

등장배경

기존에 컴폰너트내에서 스테이트와 생명주기를 관리하기 위해서는 반드시 클래스컴포넌트르 써야했는데 함수 컴포넌트에서 이러한 기능을 구현하기 위해 Hool을 도입

유의사항

Hook은 컴포넌트와 다른 훅 내에서만 사용 가능. 이름은 반드시 use로 시작해야함. 최상위 level에서만 훅을 호출할 수 있음(if문, for문 안쪽, 콜백함수 내에서 호풀하면 안됨)

State Hook과 Effect Hook

(1) State Hook

const App = () => {
  const [state이름, setState이름] = useState(초기값)
}

// useState를 호출하면 Array가 반환이 되고 0:현재값, 1:값을 바꾸기 위한 또 다른 함수.

: 동적인 데이터를 관리할 수 있는 훅. 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재 렌더링 될 경우 무시됨. 읽기 전용이므로 수정하면 안됨. 변경을 위해서는 setState 사용. state가 변경되면 자동으로 컴포넌트가 재렌더링됨. setState호출 시 값을 변경하면서 그걸 알려주는 로직이 있어서 그에 따라 컴포넌트가 다시 그려짐.

값 변경

Untitled

: 값을 변경하기 위해 setState에 직접 값을 입력하거나 현재 값을 매개변수로 받는 함수를 전달. 이 때 함수에서 return되는 값이 state에 반영됨

(2) Effect Hook

: 함수 컴포넌트에서 side effect를 수행할 수 있음. 어떤 값이 변할 때마다 내가 설정한 함수가 실행이 됨.

const App = () => {
  useEffect(EffectCallback, Deps?)
}

: EffectCallback은 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop이 변경될 때 마다 호출, 실행. Deps에 지정된 변수가 변경될 때 실행할 함수

Deps : 변경을 감지할 변수들의 집합(배열)

이외의 Hooks(state, effect 제외)

(1) useMemo : 지정한 State나 Props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄여줌. 연산은 렌더링 단계에서 이루어지기 떄문에 시간이 오래 걸리는 로직을 작성하지 않는 것이 권장됨.

const App = () => {
  const [firstName, setFirstName] = useState('철수')
  const [lastName, setLastName] = useState('김')

  //이름과 성이 바뀔 때마다 풀네임을 메모이제이션
  const fullName = useMemo(() => {
    return `${firstName} ${lastName`
  }, [fisrtName, lastName])
}