[React] Props, State, Event, Hooks

GURI·2021년 10월 17일

React

목록 보기

2/4

📌 1. Props

const Welcome = (props) {
	return <h1> {props.name} </h1>
}

Props란?

Props는 Properties의 줄임말로, 컴포넌트에 원하는 값을 넘겨줄 때 사용한다.
변수, 함수, 객체, 배열 등 JavaScript 요소라면 제한 없이 받을 수 있다.
주로 컴포넌트의 재사용을 위해 사용된다.

Props는 읽기 전용이다 !

const Welcome = (props) {
  	props.name = "GURI";
	return <h1> {props.name} </h1>
}

위 코드처럼 props.name을 "GURI"로 바꾸는 행위는 불가능하다.
Props는 읽기 전용이기 때문!
만약 값을 변경해서 사용하고 싶다면?

const Welcome = (props) {
  	const username = props.name + "님";
	return <h1> {username} </h1>
}

새로운 변수를 생성하고 그 변수에 변형해서 넣고 사용!
props 그 자체를 변경할 수는 없다.

📌 2. State

State는 컴포넌트 내에서 유동적으로 변할 수 있는 값을 저장한다.
개발자가 의도한 동작에 의해 변할 수도 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다.
State값이 변경되고 재렌더링이 필요한 경우, React가 자동으로 계산하여 변경된 부분만을 렌더링한다!

//setState 내에 변경할 값 넣기
const [username, setUserName] = useState("guri"); //초기값 : guri
setUserName("sh");

//setState에 함수를 넣기
const [cnt, setCnt] = useState(0);
setCnt((current) => {
	return current + 5
})

위 코드처럼, setState에 직접 값을 넣어 변경할 수도 있고, 함수를 넣어서 변경할 수도 있다.
함수를 넣는 경우에는 함수가 return하는 값으로 state가 변경된다.
현재 값을 기반으로 State를 변경하고자 하는 경우에는 함수를 사용하는 방법을 권장한다.

⭐⭐ Object를 갖는 State를 만들 때 주의사항

// 잘못된 예시
const [username, setUserName] = 
	useState({name="guri", grade:10})
	setUser((current) => { 
        current.grade = 15
      	return current;
    })
// 잘한 예시
const [username, setUserName] = 
	useState({name="guri", grade:10})
	setUser((current) => {
    	const newUserName = {...current} //복제
        newUserName.grade = 15
      	return newUserName;
    })

첫번째 코드 (잘못된 예시)처럼 바로 current.grade를 통해 15로 바꿔주면, React가 State의 변경을 감지하지 못하여 재렌더링이 되지 못한다.
즉, UserName object 안의 grade가 변경되었지만, UserName 자체는 변경되지 않았다.
그러므로 기존 UserName 내용을 새로운 object (newUserName)에 복제해놓고 그 object에서 grade를 변경하여 리턴해야 한다!

📌 3. 이벤트 처리

이벤트란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
ex) element가 로딩되었을 때, 클릭했을 때, 마우스를 올렸을 때 등등 다양한 이벤트가 존재한다.

2가지 방법

핸들링 함수 선언

const App = () =>{ 
  const handleClick = () => {
        alert('클릭클릭');
    }
  return (
  	<div>
    	<button onClick={handleClick}>클릭</button>
    </div>
  )
}

익명 함수

const App = () =>{ 
  return (
  	<div>
    	<button onClick={()=>{alert("클릭클릭")}}>클릭</button>
    </div>
  )
}

많이 쓰이는 DOM 이벤트
onClick, onChange, onKeyDown, onKeyUp, onKeyPress, onDoubleClick, onFocus, onBlur, onSubmit

DOM Input 값을 State에 저장하기

const App = () => {
  const [inputValue, setInputValue] = useState("value");

  const handleChange = (event) => {
    setInputValue(event.target.value);
  }
  return (
    <div>
      <input onChange={handleChange} defaultValue={inputValue} />
    </div>
  )
}

▶ event object의 target은 이벤트의 원인이 되는 Element를 가리킨다.
현재 event의 target은 input element이므로 입력된 value를 가져와 setInputValue를 통해 inputValue의 값을 변경해준다.

📌 4. Hook

Hook이란?

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용
Hook은 React 함수(컴포넌트, Hook) 내에서만 사용 가능
Hook의 이름은 반드시 use로 시작해야함
최상위 Level에서만 Hook을 호출 가능 - if,for문 내부에서 또는 콜백함수로 호출 X

알아 볼 Hook
State Hook, Effect Hook

1. State Hook

const [state이름, setState이름] = useState(초기값)

useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 Hook
최초 호출될 때 초기값으로 설정되며, 그 후 재렌더링이 될 경우 초기값은 무시된다
state는 읽기 전용이므로 직접 수정 X
state를 변경하기 위해선 setState 이용
state가 변경되면 자동으로 컴포넌트가 재렌더링 된다.

const App = () => {
	const [name, setName] = useState('');
  	//변경할 값을 직접 입력
  	setName("Guri")
  	// 또는 현재 값을 매개변수로 받는 함수 선언
  	setName((current) => {
      return current + "님";
    })
}

2. Effect Hook

useEffect(EffectCallback, Deps?)

EffectCallback : Deps에 지정된 변수가 변경될 때 실행할 함수
Deps : 변경을 감지할 변수들의 집합(배열 [...])
Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.
- side effect ?
- 함수를 입력값에 대해 일정한 출력을 하는 것으로 가정할 때, 출력값에 영향을 미치지 않는 모든 작업들을 side effect 라고 부른다.
- 즉, 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위!
- 함수 내부에서 어떤 기록을 로그로 남긴다거나, 네트워크에 전송한다면 이런 작업들을 side effect라고 한다.
컴포넌트가 최초로 렌더링될 때, 지정한 State나 Prop이 변경될 때마다 이펙트 콜백 함수가 호출된다.
Effect Hook을 이용하면 함수형 컴포넌트에서도 생명주기 메서드를 사용할 수 있다.

// count 가 증가할 때마다 콘솔에 출력해주는 예시
const App = () => {
    const [count, setCount] = useState(0);
    useEffect(() => { 
        console.log(count);
    }, [count]);
    return <button onClick={() => {
        setCount(current => {
            return current + 1;
        });
    }}>
        카운트 증가
    </button>
}