🗓️220513 State & Props & Event 세션정리
- 클래스형 컴포넌트와 함수 컴포넌트의 특징 및 Hooks의 필요성에 대해 이해한다.
- props의 개념에 대해 한 문장으로 설명할 수 있다.
- state의 개념에 대해 한 문장으로 설명할 수 있다.
- useState의 훅을 사용하여 React 컴포넌트의 상태를 관리할 수 있다.
- state를 이용해서 UI의 변경을 표현할 수 있다.
- 이벤트를 통해 state를 변경할 수 있다.
- props의 개념을 이용해 부모 요소의 state를 자식 요소에게 반영시킬 수 있다.
- props의 개념을 이용해 자식에서 일어난 이벤트로 부모의 state값을 바꿀 수 있다. (state 끌어올리기)
✍️실제로 화면에 보여지는 것은 index.html
✍️body 태그 안의 <div>부분이 화면에 그려지게 됨(index.js에서 가져옴)
✍️ReactDOM.render(, document.getElementById("root"))
=>Id가 root인 엘리먼트 안에다가 라는 컴포넌트를 그려줘!
✍️부모컴포넌트(Parent.js)가 자식컴포넌트(Child.js)에게 데이터를 전달해줘야 할 수도 있음. 데이터를 어떤식으로 전달하는지 보자
✍️부모컴포넌트에서 자식컴포넌트에 name이라는 props를 전달하기->자식컴포넌트에서 name이라는 매개변수를 받음->console 찍어서 개발자도구에서 확인해보면 {name: "래영"}찍힌거 확인
✍️props는 어떤 형태의 데이터든 다 전달할 수 있다. string,Boolean,Number,함수..
✍️props값 전달할때 {prop.name}, {prop.age} 이런식으로 접근하기
남자부분은 삼항연산자로 접근=> {props.isMale ? "남자" : "여자}입니다.
✍️컴포넌트의 장점인 재활용성이 좋다는 점을 이용한 예시(같은 컴포넌트 안에 다른 props를 넣어줌으로써 다른 내용을 보여줄 수가 있다)
✍️sayHello라는 함수도 넣어준 예시
✍️<div>에 onClick 속성 사용해서 누르면 alert 뜨게 만들어줌
✍️구조분해할당(쓰면서 익숙해지기!!)
✍️글씨색깔 바꾸기(JSX문법으로 style넣어서->실제로는 사용하는 것 지양하기)
✍️버튼 누르면 <h1>태그 색상 바뀌게끔 하고싶음 근데 안됨=>useState 사용해야함!!
✍️배열의 구조분해할당.useState("red") 괄호안의 내용은 초기값.
const [titleColor, setTitleColor]=useState("red");
▪️ titleColor는 기본값.실제로 사용되는 변수
▪️ setTitleColor는 기본값을 바꾸고 싶을때 사용. 그 변수를 바꿔주는 함수
(1) const [titleColor, setTitleColor] = useState("red") // 초기값이 red
(2)버튼을 누르는 동작을 실행하게 되면(handleClick 함수 호출) setTitleColor("blue") 실행됨
(3)순서를 이해하기 위해서 console.log(titleColor)를 찍어보면 버튼을 누르기 전에는 "red"가 출력됨
(4)버튼 누르고나면 blue로 바뀌면서 컴포넌트가 다시 그려지게돼서 "blue"가 출력됨
❓부모의 state를 자식요소로 전달하려면? props로 전달하기
✍️Parent.js의 Child props 부분에 전달할 titleColor를 입력한다
=>콘솔찍어보면 titleColor값인 red 출력 확인 완
✍️이름 바꿔서+삼항연산자로 버튼 누르면 색깔 바뀌게 구현한 모습
✔️Parent.js, Title.js, Button.js에서 버튼을 누르면 색깔이 바뀌게 하고싶다면 어디에 state을 적용해야할까?=>Parent.js
✍️<Title />과 <Button />에 각자 필요한 데이터를 props로 전달해주면됨
▪️ <Title /> : isToggled={isToggled} =>Title 색깔 변경과 관련된 데이터
▪️ <Button /> : changeColor={changeColor} =>버튼눌렀을 때 state 바꿈
