유니의 개발일지

main page 컴포넌트 : 우리가 만들 미니 블로그에 사용자가 처음 접속했을 때 보게 될 페이지 글을 작성할 수 있는 버튼과 글 목록을 보여주어야 함 MainPage.jsx 코드 작성 import React from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import PostList from '../list/PostList'; import Button from '../ui/Button'; import data from '../../data.json'; const Wrapper = styled.div` padding: 16px; width: calc(100% - 32px..

데이터베이스와 서버를 구축하는 부분까지 다룰 수 없기 때문에 가짜 데이터를 생성해야 함. data.json 코드 작성 [ { "id": 1, "title": "리액트에서 리스트 렌더링하기", "content": "안녕하세요, 소플입니다.\n이번 글에서는 리액트에서 리스트를 렌더링하는 방법에 대해서 배워보겠습니다.\n리스트를 렌더링하기 위해서는 자바스크립트 배열에서 제공하는 map함수를 사용합니다.", "comments": [ { "id": 11, "content": "실제로 개발하다보면 map함수를 진짜 많이 쓰는 것 같아요😄" }, { "id": 12, "content": "적용해보니 코드가 정말 간결해지네요ㅎㅎ" }, { "id": 13, "content": "key를 꼭 넣어줘야 하는군요~" }, ..

- 미니 블로그에서 글(post), 댓글(comment)라 이름을 정함 글 목록 보기 기능(리스트 형태) - PostList, PostListItem 글보기 기능 - Post 댓글 보기 기능 - CommentList, CommentListItem 글 작성 기능 - PostWrite 사용자로부터 입력받음 댓글 작성 기능 - CommentWrite 사용자로부터 입력받음 3) 폴더 구성하기 - 폴더를 구성하는 이유는 각 컴포넌트들을 적당한 폴더에 모아서 관리함으로써 개발의 편의와 향후 유지 보수가 용이하게 하기 위해서이다 component 폴더 하위에 page 폴더, list 폴더, ui 폴더를 생성 4) UI Component 구현하기 UI component : 버..

미니 블로그 기획하기 - 실제 서버 구현은 어려우나 화면을 react 컴포넌트로 만들어 보고 각 컴포넌트를 연결하여 겉모습만 블로그 형태로 구현 1) 개발을 시작하기 전에 정해야 할 것들 : 기획, 필요한 기능, 전체 디자인에 대해서 간단하게나마 정리해야 함 글 목록 보기 기능 (리스트 형태) 글 보기 기능 댓글 보기 기능 글 작성 기능 댓글 작성 기능 - 메인 화면 : 글 목록을 보여주고 글 작성 버튼을 누르면 글을 작성할 수 있는 화면 2) 실제 개발 시작! //create-react-app을 사용해 프로젝트 생성 npx create-react-app mini-blog //프로젝트 디렉토리에 들어가서 앱 실행하기 cd mini-blog npm..

styled-components install Blocks.jsx 코드 import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgr..

Styling : 웹사이트 전체 레이아웃 구성을 포함하여 버튼의 색깔, 테두리, 폰트의 크기, 색상 등을 모두 포함하는 개념 CSS (Cascading Style Sheets) : 스타일링을 위한 일종의 언어 *cascading : 계단식 여러가지 스타일이 정의되어 있으며 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있음 하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에 해당 스타일들을 마치 계단을 한 칸씩 내려가는 것처럼 우선순위를 가지고 하나씩 적용함 -> 하나의 스타일이 여러개의 엘리먼트에 적용 가능 & 하나의 엘리먼트에도 여러 개의 스타일이 적용 가능 Selector 선택자 : 엘리먼트에 스타일이 적용되는 규칙 스타일을 어떤 엘리먼트에 적용할지를 적용하게 해주는 것 CSS = selec..

DarkOrLight.jsx import { useState, useCallback } from "react"; import ThemeContext from "./ThemeContext"; import MainContent from "./MainContent"; function DarkOrLight(props) { const[theme, setTheme] = useState("light"); const toggleTheme = useCallback(() => { if(theme == "light"){ setTheme("dark"); } else if(theme == "dark") { setTheme("light"); } }, [theme]); return ( ); } export default DarkO..

Context : 리액트 컴포넌트들 사이에서 데이터를 기존의 props를 통해 전달하는 방식 대신 컴포넌트 트리를 통해 곧바로 컴포넌트로 전달하는 새로운 방식을 제공함 -> 컨텍스트 사용하면 일일이 prop로 전달할 필요없이 데이터를 필요로 하는 컴포넌트에 곧바로 데이터를 전달할 수 있음 언제 Context를 사용해야 할까? 여러 개의 Component들이 접근해야 하는 데이터 : 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 언어 등 Context를 사용하면 : 기존 방식의 실제 데이터를 필요로 하는 컴포넌트까지의 깊이가 깊어질수록 복잡해짐을 개선할 수 있음 + 전체적으로 간결하고 깔끔하며 직관적으로 바뀜 Context를 사용하기 전에 고려할 점 : 컴포넌트와 Context가 연동되면 재사용성..

Card.jsx function Card(props) { const{ title, backgroundColor, children } = props; return ( {title && {title}} {children} ); } export default Card; ProfileCard.jsx import Card from "./Card"; function ProfileCard(props) { return ( 안녕하세요, 지윤입니다. 저는 리액트를 사용해서 개발하고 있습니다. ); } export default ProfileCard; 실행화면

Composition vs. Inheritance Composition 합성 : 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 여러개의 컴포넌트들을 어떻게 조합할 것인가?에 대한 고민이 필요함 -> 조합 방법에 따라 컴포지션의 사용기법이 나뉨 컴포지션 방법 Containment : 하위 컴포넌트를 포함하는 형태의 합성 방법 사용법 : React 컴포넌트의 props에 기본적으로 들어있는 Children 속성을 사용하면 됨 ex) sidebar나 dialog 같은 box형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없음 -여러개의 children 집합이 필요한 경우 : 별도로 props를 정의해서 각각 원하는 컴포넌트를 넣어주면 됨 specialization 전문화 특수화 : 범용적인 개..