brobro332.dev

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. CSS 문법을 그대로 사용하면서 결과물을 스타일링 된 컴포넌트 형태로 만들어 주는 오픈소스 라이브러리다.컴포넌트 개념을 사용하므로 리액트와 궁합이 잘 맞다. 다음 명령어를 통해 설치한다.npm install --save styled-components 기본적인 사용법Styled-Components는 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정한다.여기서 템플릿 리터럴은 자바스크립트에서 제공하는 문법 중 하나이고, 리터럴은 소스 코드의 고정된 값을 의미한다.템플릿 리터럴은 백틱을 사용하여 문자열을 작성하고 그 안에 대체 가능한 expression을 넣는 방법이다. 다음은 태그드 템플릿 리터럴을 사용한 예제이다.const name = ..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 컨텍스트컨텍스트는 기존의 props를 통해 리액트 컴포넌트들 사이에서 데이터를 전달하는 방식 대신 컴포넌트 트리를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공한다.기존 방식의 경우 하위 컴포넌트로 데이터를 전달하려면 트리를 타고 몇 번이든 내려가며 전달을 해야하지만, 컨텍스트를 사용한다면 데이터를 필요로 하는 컴포넌트에 곧바로 데이터를 전달할 수 있다.컨텍스트는 언제 사용해야 할까? 여러 컴포넌트에서 자주 필요로 하는 데이터의 경우 사용자의 로그인 여부, 로그인 정보, UI 테마, 현재 선택된 언어 등이 있다.다음은 props를 이용하여 기존 방식으로 데이터를 전송하는 예제이다.function App(props) { return ;}fun..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 합성여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것을 말한다.가령 컴포넌트 A와 컴포넌트 B를 사용해 하나의 페이지를 만들었다고 하면 합성을 사용했다고 볼 수 있다.아무렇게나 조합하는 것이 아니라 여러 개의 컴포넌트를 어떻게 조합할 것인가에 대한 합성 사용 기법이 존재한다. Containment하위 컴포넌트를 포함하는 형태의 합성 방법이다.사이드바나 다이얼로그와 같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없다.예를 들어 두 쇼핑몰 사이트에서 같은 사이드바 컴포넌트를 사용한다고 가정해 보자.당연히 각 쇼핑몰의 사이드바에 들어갈 메뉴의 개수가 상이할 수 있으므로 하위 컴포넌트를 미리 예측할 수 없다.이런 경우에는 pro..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 컴포넌트 간 상태 공유어떤 컴포넌트의 상태를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 것을 의미한다. 실습Calculator.jsx├── BoilingVerdict.jsx└── TemperatureInput.jsx오늘 실습 프로그램의 구조이다. Calulator.jsximport React, { useState } from "react";import BoilingVerdict from "./BoilingVerdict";import TemperatureInput from "./TemperatureInput";function toCelsius(fahrenheit) { return ((fahrenheit - 32) * 5) / 9;}fun..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 폼폼은 사용자로부터 입력을 받기 위해 사용한다.HTML의 폼은 엘리먼트 내부에 각각의 상태가 존재한다.반면 리액트의 폼은 컴포넌트 내부에서 상태를 통해 데이터를 관리한다. 이름 : 제출상기 코드는 HTML의 폼이다.리액트에서도 작동은 하지만 자바스크립트 코드를 통해 사용자가 입력한 값에 접근하기는 불편한 구조이다.이를 해소하기 위해선 제어 컴포넌트를 숙지해야 한다. 제어 컴포넌트리액트의 통제를 받으며, 사용자 입력에 대한 접근 및 제어를 처리하는 입력 폼 엘리먼트이다.위의 HTML 폼을 리액트의 제어 컴포넌트로 만드는 것이다.function NameForm(props) { const [value, ..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 리스트와 키리스트는 같은 유형의 아이템을 순서대로 모아놓은 것이다.리스트를 구현하기 위해 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것을 배열이라고 한다.키는 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미한다. Map()같은 컴포넌트를 재사용할 때 각 컴포넌트의 내용을 코드상에 하나씩 직접 넣는 것은 비효율적이다.대신 자바스크립트 배열의 map() 함수를 사용하면 된다.map() 함수는 배열에 들어있는 각 변수 또는 객체에 어떤 처리를 한 뒤 배열을 리턴한다. 다음은 예제 코드이다.function NumberList(props) { const { numbers } = props; const listItems = ..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 조건부 렌더링이란?조건에 따라 렌더링이 달라지는 걸 의미한다.여기서 조건은 프로그래밍 언어에서 보통 일컫는 조건문을 의미한다. 인라인 조건이란?조건문을 코드 안에 집어넣는 것을 의미한다. 코드를 살펴보자. 인라인 iffunction Mailbox(props) { const unreadMessages = props.unreadMessages; return ( 안녕하세요! {unreadMessages.length > 0 && 현재 {unreadMessages.length}개의 읽지 않은 메세지가 있습니다. ..

왜 API URL을 환경 변수로 설정해야 하지?프론트단과 서버단의 동시 작업을 위해서이다. 서버단의 개발이 완벽하여 서버 애플리케이션을 도커로 띄워놓고 해당 버전에 맞게만 리액트 애플리케이션을 개발해도 된다면 문제가 없지만, 실제로는 프론트단과 서버단의 개발이 동시에 진행될 것이고, 개발환경과 운영환경의 API URL은 달라질 수밖에 없다.커밋할 때마다 API를 호출하는 메서드별로 URL을 수정하는 것은 사실상 불가능에 가깝다. 어떻게 해?먼저 환경 변수 파일을 작성한다.해당 환경 변수 파일을 전역 변수로 사용할 수 있도록 자바스크립트 파일을 작성한다.API를 호출하는 파일에 import 하여 해당 환경 변수를 URL에 주입한다. 예제를 살펴보자 .env# 개발환경# REACT_APP_API_BASE_U..

Overview - Material UIMaterial UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.mui.comUI는 위 사이트에서 컴포넌트를 가져다 썼다.원래 쌩으로 CSS 건드려서 만들어 보려고 했는데, 이쁘지도 않고 너무 시간이 많이 투입되었다.디자인도 디자인인데 UI 라이브러리 사용여부에 따라 생산성 차이가 정말 크다는 걸 실감했다. 최초 접속 시 로그인 페이지를 노출한다.계정이 없을 경우 회원가입을 할 수 있도록 한다.※ 개선사항 - OAuth 2.0 구글/카카오 로그인 ..

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.  리액트에서 이벤트 처리는 어떻게?// DOMActivate// 리액트ActivateDOM에도 리액트에도 이벤트가 있지만 사용하는 방법이 조금 다르다.이벤트가 발생했을 때 해당 이벤트를 처리하는 함수가 있는데 이것을 이벤트 핸들러 또는 이벤트 리스너라고 한다.  클래스 컴포넌트의 이벤트 처리를 살펴보자class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn : true }; this.handleClick = this.handleClick.bind(this); }..