useState같은 Hook들은 리액트 컴포넌트 함수 안에서 호출되어야 한다.
리액트 컴포넌트 함수 밖에서는 호출되지 않음.
중첩된 함수안에서도 호출할 수 없음. 무조건 컴포넌트 함수 안에서 직접적으로만 호출되어야 함.
useState()는 특별한 종류의 변수를 생성한다고 생각하면 된다.
해당 변수는 변경사항으로 인해 컴포넌트 함수가 다시 호출되도록 할 것임.
첫 번째 값이 변수 자체인 배열을 반환하고, 배열에서 두 번째 요소는 업데이트 되는 함수다.
첫 번째 요소는 현재 상태값
두 번째 요소는 그것을 업데이트하는 함수
따라서, 배열 구조 분해라는 기능을 사용할 수 있음.
state가 변할 때 컴포넌트 함수를 다시 호출하고 싶으면, state를 업데이트하는 함수를 호출하면 된다.
(Keep in mind)
1. State는 컴포넌트의 인스턴스별로 나누어져있음.
2. 등호를 사용해서 값을 할당하지 않는다. 때문에 const를 사용해도 괜찮음.
3. 컴포넌트 함수에서는 state가 업데이트되면 재실행 된다는 것.
state사용법 요약
1. useState를 사용해서 상태를 등록하면, 항상 두 개의 값을 얻음.
2. 현재 상태값과 업데이트하는 함수.
3. state가 변화할 때 마다 업데이트 함수를 호출함.
4. JSX코드에서 그것을 춣력하기 위해 첫 번째 요소를 사용함.
5. 그리고 해당 컴포넌트 함수를 재실행하며 재평가를 내림.
- 응용프로그램에게 반응성을 추가하는 것이 state
onChang 장점 : 모든 입력 타입에 같은 이벤트를 사용할 수 있음.
Keep in mind
input요소에는 value 속성이 있음. 이벤트가 벌어졌을 시점의 현재 입력값을 갖는다. target값과 함께 넣으면(event.target.value) 내가 수신하는 요소에 이벤트가 발생했을 때 입력된 값을 받을 수 있음.
구조분해할당?
구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식
[a, b] = [b, a]
양방향 바인딩
- form으로 작업할 때 아주 유용함. 폼전송에 따라 사용자의 입력을 모으거나 변경할 수 있게 해줌.
props
props는 부모 component로부터 받아온 데이터임.
props는 부모 컴포넌트에서 내려오는 모든 데이터를 칭하는 것이다.
props는 오직 부모 컴포넌트에서 자식 컴포넌트 방향으로만 전달 가능하다.
(내 밑으로만 props 전달 가능.) 형제 컴포넌트끼리 X
아래 처럼 컴포넌트 사이에 있는 정보를 받으려면 받는 컴포넌트 쪽에서 children으로 받아줘야 한다.
function Mother() {
return <Child>20세 아들</Child>
}기본 props를 줄 수 있는 방법
function User({name = "빛이나는 솔로"}) {
return <div>안녕하세요. 저는 {name}입니다.</div>
}
User.defaultProps = {
name : '제니',
}defaultProops가 없으면 빛이나는 솔로가 나올 것이고, 아니라면 제니가 나올 것임.
State는 Component 내부에서 바뀔 수 있는 값을 의미한다.
State === 상태
