props
- props 는 변경할 수 없는 읽기 전용 데이터
State lifting up : 상태 끌어올리기
-
리액트에서는 부모 컴포넌트가 자식 컴포넌트 상태를 직접 변경 불가
-
Id 컴포넌트 (자식)
-
Pw 컴포넌트 (자식)
-
Exam3 컴포넌트 (부모) - 해당 파일에서 내보낼 기본 컴포넌트
한 파일에 컴포넌트가 여러개 있어도 상관 X
한 파일에 여러 컴포넌트를 만들고 한 곳에서 불러다가 레고처럼 조립하면 유지보수성도 좋아짐
useState = hook 여기 대괄호의 두 번째는 반드시 Set 이 들어가야된다 개발자의 관례라고 보면된다.
함수형 컴포넌트에서 관리하기 쉽게 hook 으로 만든 것 useState 는
이것을 상속받아야 한다
이렇게 같은 레벨 = {} 안에 같은 태그가 있을시 부모 태그가 존재해야된다.
자식이 두개가 있을때
각각 export default 를 못한다 두 개 이상의 export 가 존재하지 않기때문에
자식들을 불러줄 부모 함수를 만든다
<< 이건 파일에 Id 라는 이름으로 생성된 함수를 렌더링 = 호출 한다는 뜻
Id 나 Pw 가 둘 중 하나라도 값이 없으면 버튼이 비활성화 라는 뜻이다
Id 와 Pw 의 값을 부모태그에선 읽어 들이지 못한다 그래서 자식 태그가 상태 끌어올리기를 사용해야된다.
부모 태그한테 자식의 상태를 넣어줌
input 창의 값을 실시간으로 확인할 수 있는 이벤트 핸들러를 만들어준다
값을 넣어도 login 버튼이 활성화가 안됀다
그래서 input 태그 안에 이벤트를 넣어줘야된다.
input 의 값들이 e 로 들어올거다
값들을 다 setId 에 넣어줄거다
자식 컴포넌트한테는 역할만 전달할 수 있다
전달할 때 이름을 전달할 수 있다
부모가 자식한테 이름을 붙혀 전달해줌
그러면 자식도 받을 준비가 되어있어야됨
매개변수 자리에 props 전달
props = 부모가 자식한테 전달한 것
매개변수에 props 가 아니라 {onchangePw} 로 바로 부모로부터 받은 걸 이름을 바꿀수도 있다
Props Drilling : 상태 내려꽂기
- 이런 기술이 있는게 아니라 이런 문제가 있다
한 줄만 return 하면 소괄호 작성 안해도됨
useDate 에 name : '홍길동' , age : 30 이라는걸 넣겠다
return 에 저렇게 {...userData} 를 쓰면
객체로 들어가있던 값들이 펼쳐져서 보내준다.
이게 전개연산자
return <MyComponent name={userData.name} age={userData.age} />
