도팍 개발공부 도팍 개발공부

게임을 만들며 했던 고민들 - 컴포넌트를 어떻게 나눌 것인가? 색깔 찾기 게임을 만들며 핵심 state를 제어하기 위해서는 컴포넌트마다 여기저기 놓여있는 것보다 한 곳에서 제어하는 것이 편할 것이라고 생각하여 핵심 state 제어 관련 기능은 App.tsx에서 구현했습니다. 컴포넌트는 Block, Section, Header로 나누었습니다. Header은 게임 상단의 스테이지, 남은 시간, 점수를 포함하는 컨테이너입니다. Section은 실제 게임을 담은 컨테이너며, Block은 각 색깔이 담아있는 컨테이너입니다. 모두 논리 관련이 아닌 아래의 Section 컴포넌트의 코드와 같이 스타일 관련 코드로 이루어져 있습니다. // Section Component import styled from "styled..

클래스101 클론 Github: https://github.com/dohpark/class101clone Page: https://class101clone.herokuapp.com/ # 0 세팅 및 라이브러리 세팅은 cra(create-react-app)을 사용했습니다. class 101 디자인 시스템 라이브러리를 사용할까 생각했지만 결국 사용 안했습니다... # 1 아토믹 디자인 폴더는 크게 atoms, molecules, oranganism으로 나누었습니다. atoms에는 Badge, Button, Icon, IconButton, Image, TextButton 등 재활용할 수 있는 가장 작은 단위로 나누었습니다. Icon의 경우 svg파일을 직접 사용하기 보다는 컴포넌트로 사용할 수 있도록 했습니다..

리액트는 안타깝게도 라우팅 기능을 내장 되어있지 않아 이를 도와줄 수 있는 라이브러리를 사용해야 합니다. 많고많은 리액트 라우터 라이브러리 중에 사람들이 가장 많이 사용하는 react-router-dom에 대하여 알아보겠습니다. 설치 먼저 새로운 프로젝트 생성 후 해당 프로젝트 디렉토리로 이동하겠습니다. npx create-react-app router-practice cd router-practice 그 후 react-router-dom 라이브러리를 설치하겠습니다. npm install react-router-dom 예시 1 : 기본 라우팅 import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "re..

공부하기 위해 리액트 공식 문서 및 리액트 블로그를 정리한 내용입니다. Ref 일반적으로 리액트에서 DOM의 어느 자식을 수정하기 위해서는 새로운 props를 전달하여 자식을 다시 렌더링해야합니다. 그러나 이런 일반적인 방법을 벗어나 직접적으로 자식을 수정해야 하는 경우도 있습니다. 그 중 하나의 방법으로 Ref를 사용하실 수가 있습니다. Ref를 사용해야할 때 리액트는 다음과 같은 사례에 Ref를 사용할 것을 권장합니다 focus, text selection, 미디어 재생 을 관리해야할 경우 애니메이션을 직접 실행해야하는 경우 서드 파티 DOM 라이브러리를 리액트와 같이 사용할 경우 Ref 생성하기 class 컴포넌트 class MyComponent extends React.Component { con..

Portals Portals란? ReactDOM.createPortal(child, container) createPortal 메서드를 사용하면 자신의 부모 컴포넌트 DOM 계층구조 밖을 넘어선 어느 DOM 노드에 자식으로 렌더링 할 수 있습니다. 이름 그대로 포탈처럼 child 매개변수에 작성한 엘리먼트를 원하는 DOM 노드의 자식으로 넣을 수 있습니다. 첫번째 인자(child)에는 엘리먼트, 문자열, fragment 등 리액트 자식을 작성할 수 있습니다. 두번째 인자(container)에는 자식으로 렌더링하고자 하는 DOM 엘리먼트를 작성하시면 됩니다. 이벤트 버블링과 Portals 사용예시 portal은 일반적인 React 자식과 같이 동작을 합니다. portal은 DOM 트리에서는 위치가 바뀌어도..

Context context를 사용하면 컴포넌트 트리 전체에 데이터를 공유하여, 부모부터 자식에게 데이터를 props를 통해 전달해주지 않아도 됩니다. 언제 context를 사용해야하나요? 리액트를 사용하다면 현재 로그인한 유저, 테마(dark 혹은 light), 선호하는 언어 등 전역적으로 데이터를 공유해야 할 경우 context를 사용하면 됩니다. context를 사용하지 않은 예시입니다. class App extends React.Component { render() { return ; } } function Toolbar(props) { // Toolbar 컴포넌트는 불필요한 테마 prop를 받아서 // ThemeButton에 전달해야 합니다. // 앱 안의 모든 버튼이 테마를 알아야 한다면 //..

공부하기 위해 리액트 공식 문서 및 리액트 블로그를 정리한 내용입니다. 리액트 엘리먼트로 리스트를 만들 때 key를 추가하는 것을 깜빡하면 아래와 같은 에러를 확인할 수 있습니다. 오늘은 왜 key를 추가하지 않으면 왜 이런 경고 문구가 나타나는지, 그리고 리액트한테 key란 무슨 역할을 하는지에 대하여 알아보겠습니다. 기본 리스트 컴포넌트 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getEl..

리액트를 사용하며 JSX를 기본적으로 사용하는데, 이번에 JSX가 어떻게 바벨을 통하여 자바스크립트 객체를 호출하여 이를 UI에 반영하는지 알아보도록 하겠습니다. 예시와 설명은 리액트 공식문서를 토대로 작성했습니다. JSX 흔히 사용하는 jsx 중 하나입니다. const element = ( Hello, world! ); 바벨은 컴파일을 통하여 위의 우리가 적은 JSX를 아래와 같이 컴파일입니다. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); React.createElement()는 몇 가지 검사를 수행 한 뒤 아래와 같은 객체를 생성합니다. // 주의: 다음 구조는 단순화되었습니다 const e..