WIL (4주차)

4주차 WIL 회고.

props

• props는 부모 컴포넌트로부터 받아온 데이터이다.
• 컴포넌트 간의 정보를 교류할 때 props를 사용한다.

import React from "react";

function App() {
	return <GrandFather />;
}	// GrandFather로 데이터를 보냄

function GrandFather() {
	const name = '김할아버지';
	return <Mother grandFatherName={name} />;
}    // Mother로 grandFatherName을 보냄

function Mother(props) {
	return <div>{props.grandFatherName}</div>
}  // props로 받은 grandFatherName을 출력.

State

• State란 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.
• useState() 를 사용한다.
• import React, { useState } from "react";
• 바꾼 값은 어디에 저장되는 것이 아니기 때문에 단순히 화면에서만 바뀐 값으로 다시 렌더링이 된다.

const [name, setName] = useState("김할아버지");

리액트의 리렌더링

• 부모 component가 리렌더링 될때.
• State 값이 변경될 때.
• props로 내려받은 값이 변경될 때.
• foreUpdate() 함수가 실행될 때.

저번주차에 배운것

• Component
• Props
• State
• 반복되는 컴포넌트 처리, 컴포넌트 분리
• map() 에는 Key값이 필요하다!

이번주차에 배울것

• styled-components
• React Hooks (useState, ustEffect)
• React Hooks (useDispatch, useSelecter)
• Redux

화이팅.