Phot_o_matic Programming

우리는 종종 새로운 서비스를 처음 접하거나 기존 서비스에 신규 기능이 추가되는 경우에 튜토리얼을 진행해본 경험이 있을 것이다. 사용자는 튜토리얼을 통하여 특정 위치의, 특정 요소가 가지는 역할에 대해서 차례대로 하나씩 인지하게 된다. 위의 gif는 React의 Portal 기능을 이용하여 만든 튜토리얼 컴포넌트의 진행 과정이다. Portal은 특정 DOM 엘리먼트의 자식으로써 엘리먼트, 문자열 또는 fragment 등 종류에 상관없이 React 자식이기만 하면 렌더링 할 수 있게 해준다. 때문에 Dialog나 Tooltip과 같이 시각적으로 자식 엘리먼트를 "튀어보이게" 하려는 경우에 많이 사용한다. 실제로 예시 이미지에서도 현재 설명중인 엘리먼트는 시각적으로 "튀어"보이고 있다. Portals – Re..

Programming/React 2022. 10. 26. 18:02

⏰Effective Component 제품의 성장 과정에 있어서 잦은 변경이라는 것은, 더 나아지기 위한 성장통과 마찬가지이다. 놓치고 있었던 고객의 니즈를 발견한 것이라고도 할 수 있다. 그렇다면 이런 변경에 대해서 유연하고 효율적으로 대응하려면 어떻게 컴포넌트를 설계해야할까? 목차 Headless 기반의 추상화 변하는 것 vs 상대적으로 변하지 않는 것 [한 가지 역할만 하기] 또는 한 가지 역할만 하는 컴포넌트의 조합으로 구성하기 도메인 분리하기 도메인을 포함하는 컴포넌트와 그렇지 않은 컴포넌트 분리하기 1. 💀Headless UI 기반의 추상화하기 컴포넌트는 크게 세 가지 영역으로 구분된다. 데이터 UI : 어떻게 데이터를 보여줄지? 사용자 상호작용 : 어떻게 상호작용할지? 예를 들어 달력 기능을..

Programming/React 2022. 6. 16. 10:43

react에서 비동기를 다루는 방법은 다양하다. javascript 언어니까 당연히 Promise, async & await으로 처리가 가능하다. redux를 사용하고 있다면, redux saga, thunk 등 다양한 미들웨어가 제공된다. 하지만 이런 것들로 서버의 상태를 관리하기란 여간 어려운 일이 아니다. 아래의 이유들로 앱과 서버 간의 관계 및 상태를 말할 수 있을 것이다. 원격에 위치한 곳에 저장. 앱이 소유하거나 제어하지 않음. 데이터 가져오기 및 업데이트를 위해서는 비동기 API가 필요. 다른 사람들과 함께 사용해서, 나도 모르는 순간에 업데이트 될 수 있음. 앱에서 사용하는 데이터가 OUTDATED 상태가 될 가능성 가짐. 기본적인 React Query 형태 함수형 컴포넌트 내에서 Hook..

Programming/React 2021. 5. 24. 23:13

React tool chain, create-react-app 이번 프로젝트의 클라이언트 구성에서 React.js를 사용함에 있어, 많은 툴체인 중 하나인 create-react-app를 적용하였다. React를 배우고 있는 중이거나, 신규 싱글 페이지 앱을 만들 때 사용하라고 공식 홈페이지에서도 추천하고 있다. 다른 성격의 프로젝트를 진행하거나, 다른 툴체인이 궁금하다면 아래의 링크를 참고하면 좋겠다. 새로운 React 앱 만들기 프로젝트 생성과 라이브러리 설치 cretate-react-app npm install react-router-dom (브라우저에서 사용되는 리액트 라우터) npm install cross-env --dev (프로젝트에서 NODE_PATH를 사용해 절대경로로써 파일을 불러오기 ..

Programming/Hello, stranger 2019. 7. 12. 21:47

React는 Component 내부에서 state라고 하는 속성값을 가짐으로써, rerender를 발생시키는 기준점으로 삼을 수 있다. React의 Lifecycle을 생각해보았을 때, 어떤 state 값의 변화가 있을 경우, 새롭게 render를 하였던 것을 떠올릴 수 있다. 관리하는 state의 수가 몇 가지 안 되고, component의 개수, 깊이가 적은 경우에는 props로 state 변경 및 갱신된 값을 넘겨주는 것이 별 것 아닌 것처럼 느껴질 수 있다. 하지만, 조금만 구조가 복잡해지면 이런 관리가 몇 배는 복잡해지는 것을 상상할 수 있을 것이다. 아래의 그림을 보면 redux라는 것이 있을 경우와 없을 경우를 비교할 수 있다. redux를 통하여 state 관리가 얼마나 간편하고 직관적으로..

Programming/React 2019. 7. 3. 14:32

Element란? Element는 React 앱의 가장 작은 단위이다. Element는 화면에 표시할 내용을 기술한다. Component와 혼동하여서는 안 된다. Rendering Elements in DOM HTML 파일 내부에 가 있다고 가정해보자. &ltdiv id="root"&gt&lt/div&gt 이 안에 들어가는 모든 element를 React DOM에서 관리하므로, 이것을 root DOM node 라고 부른다. React로 구현된 앱은 일반적으로 하나의 root DOM node가 있다. React element를 root DOM node에 render하려면 둘 다 ReactDOM.render() 에 전달해주면 된다. const element = &lth1>Hello, world&lt/h1>;..

Programming/React 2019. 6. 11. 14:34