3. 상태관리, 라우팅 3-1. 상태관리 - 상태관리란? : 상태관리는 쉽게 말해 전역 데이터 관리예요. 렌더링과 연결된 데이터를 컴포넌트끼리 주고 받기는 생각보다 번거롭습니다. 이런 번거로움을 줄여주기 위해 전역 데이터를 만들고 관리해주는 게 리액트에서 말하는 상태관리예요. - 형제 컴포넌트끼리 데이터를 주고 받으려면? : 1. 부모 컴포넌트에서 state를 생성하고 자식 컴포넌트들에게 props로 데이터와 state를 변경할 함수를 넘겨줌. 2. 자식 컴포넌트에서는 props로 받아온 값을 참조해서 쓰고, 값 변경이 필요한 경우는 넘겨받은 함수로 해당 값을 변경해줌. 3. [생각해보기] 만약 1촌 관계 컴포넌트가 아니라 6촌 관계 컴포넌트가 같은 데이터를 사용하려고 한다면? → 생각만 해도 끔찍.....

3-1. Event Listener - 이벤트 리스너 : 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. ( 대표적 : 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등 ) 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번에는 addEventListener를 통해 추가해볼 거임. 동그라미 안에 텍스트를 한 줄 넣고 텍스트를 넣어줄 건데 동그라미에 마우스를 올렸을 때 동그라미의 색이 변하고, 텍스트에 마우스를 올렸을 때 텍스의 색이 변하도록 할 거임. - App.js import React from "react"; import styled from "styled-components"; import Text from "./Text"; const Wrap = st..