유니의 개발일지

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 전문화 특수화 : 범용적인 개..

Calculator.jsx import React, { useState } from "react"; import TemperatureInput from "./TemperatureInput"; function BoilingVerdict(props){ if(props.celsius >= 100){ return 물이 끓습니다.; } return 물이 끓지 않습니다.; } function toCelsius(fahrenheit){ return ((fahrenheit - 32) * 5)/9; } function toFahrenheit(celsius){ return (celsius * 9) / 5 + 32; } function tryConvert(temperature, convert){ const input = pa..

Lifting State Up : 여러 개의 컴포넌트들 사이에서 state를 공유하는 방법 Shared State 공유된 state : state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용하는 것 하위 컴포넌트에서 state 공유하기 1) 물의 끓음 여부를 알려주는 컴포넌트 function BoilingVerdict(props) { if (props.celsius >= 100) { return 물이 끓습니다.; } return 물이 끓지 않습니다. ; } : 섭씨온도 값을 props로 받아서 물이 끓는지 안 끓는지를 문자열로 출력해주는 컴포넌트 2) 이 컴포넌트를 실제로 사용하는 부모 컴포넌트 fun..

SignUp.jsx 코드 import React, { useState } from "react"; function SignUp(props){ const [name, setName] = useState(""); const [gender, setGender] = useState("남자"); const handleChangeName = (event) => { setName(event.target.value); }; const handleChangeGender = (event) =>{ setGender(event.target.value); }; const handleSubmit = (event) => { alert(`이름 : ${name}, 성별: ${gender}`); event.preventDefault()..

Forms : 사용자로부터 입력을 받기 위해 사용하는 것 React에서의 Form vs. HTML의 Form React = 컴포넌트 내부에서 state를 통해 데이터를 관리 HTML = 엘리먼트 내부에 각각의 state가 존재함 Controlled Components : 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트 누군가의 통제를 받는 컴포넌트 -> 누군가 = React => 값이 리액트의 통제를 받는 input Form Element 리액트에서 모든 값을 통제할 수 있는 구조를 가지고 있음 -> 입력 양식의 초기 값을 내가 원하는 대로 넣어줄 수도 있으며 다른 양식의 값이 변경되었을 때 또 다른 양식의 값도 자동으로 변경시킬 수 있다는 것 HTML Form 은 자체적으로 state를..