Step by Step

# 모달창과 팝업창의 차이 ## 팝업창 팝업창이란 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것이다. 즉, 창 + 창 이란 개념이다. 브라우저에서 이 창을 열기 닫기를 제어할 수 있다. ## 모달창 새로 뜬 자식창을 닫기 전까지는 부모와의 소통이 불가능 모달창은 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌 레이어를 띄우는 것을 말한다. 모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라진다. 기존의 페이지와 부모-자식 관계를 갖으며, 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않는다. 모달을 실행한 채로 부모창의 스크롤이 가능하지 않으면 모달, 가능하다면 모달리스라고 불린다. 이벤트 공지, 로그인/회원가입, 게시글 작성, 알림 등 용도는 다양하다. 공통점은 ..

#10장 일정관리 웹 애플리케이션 만들기 구성 순서 : 프로젝트 준비하기 -> UI 구성하기 -> 기능 구현하기 10.1 프로젝트 생성 및 필요 라이브러리 설치 body { margin: 0; padding: 0; background: #e9ecef; } const App = () => { return Todo App을 만들자! } export default App; 10.2 UI 구성하기 TodoTemplate : 화면을 가운데에 정렬시키며, 앱 타이틀을 보여준다. TodoInsert : 새로운 항목을 입력하고 추가할 수 있는 컴포넌트, state를 통해 인풋 상태 관리 TodoListItem : 각 할 일 항목에 대한 정보를 보여주는 컴포넌트이다. todo 객체를 props로 받아와서 상태에 따라 다..

#9장 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 여러 방식 중에서 딱히 정해진 건 없다. • 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 • Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성하게 한다 • CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성 • styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만듬 컴포넌트 스타일링 실습 과정 프로젝트 준비하기 -> 일반 CSS 사용하기 -> Sass..

#8장 Hooks Hooks는 리액트에 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 한다. 리액트 내장 Hooks 사용하기 => 커스텀 Hooks 만들기 8.1 useState useState는 가장 기본적인 Hook이며 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 한다. import { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다. setValue(value+1)..