Web Front-end/React
[React/Optimize/Memo] Component를 분리하고, 마지막으로 React의 Memorization을 활용해보자!
Component의 재사용성과 확장성을 갖기위해서 , 컴포넌트의 "합성"를 이용해서 , 좀 더 추상적인 컴포넌트를 만들고 혹은 재사용되는 컴포넌트를 만들고 구체화하는 방식으로 구현했습니다. 하지만, 그에 따른 부작용으로 컴포넌트간의 관계가 복잡해지고, 리렌더링 Issue가 생기기 시작했습니다. 현실적으로 FE 개발자에게 "생산성"은 빠질 수 없는 요소이기 때문에, 사실 이러한 이슈에 대해서 깊게 파고드는 것은 당장 필요한 사항은 아닐 수 있습니다. 세부적인 동작은 모두 React에 일임하고 , 우리는 그것을 사용하면 되니까요. 하지만,한번 깊이감있게 가져가보겠습니다. 재밌기도 하거든요! Memo를 사용하기 전에, 독립적으로 나눌 수 있는 Component가 없는지 확인해보자 . (By 공식문서) 저보다 ..
[React/Composition] 리액트 컴포넌트의 확장(React Composition)
React를 잘 사용하기 위해서는 , 컴포넌트 설계능력이 필수적이게 된다. 이건 경험적인 요소라 많이 쓸수록 자연스럽게 늘어나겠지만, 한번 의식적으로 확장을 해보자! 웹 환경에서의 재사용 웹에서는 생각보다 반복적인 작업이 많다. 예를들어, 아래와 같은 Modal 창을 구현한다고하자. Modal창은 구체화되서, "로그인창"이 될 수도 있고, "상세정보를 보여주는 Modal창"이 될 수도있다. 물론 , 각각 폴더로 분리해서 각각의 Component로 구현해도 무방하다. 하지만, 이번에는 "의도적"으로 Modal창을 추상화시키고, Login창과 Detail창을 구현해보도록 하겠습니다. 마치 "상속"과 비슷하지 않나요! React에서는 상속대신 , Composition https://reactjs.org/doc..
[React/State/Props] MVC 모델과 Flux모델 , React의 선택
React의 핵심은 "상태(state)"를 어떻게 잘 관리하냐는 것입니다. TodoList를 짜면서도 느낀거지만, 기본적으로 state는 setState로 비동기로 관리하게 되고, 불변성을 만족하는 등의 일종의 제약조건이 있게 됩니다. React는 화면과 데이터를 일치시키기 위해서, 다른 말로 하면 실시간 렌더링을 위해서 , Flux패턴을 채용했습니다. 상태 끌어올리기를 이해하기 위해서는, React의 기본적인 데이터의 흐름에 대해서 이해해봅시다! React의 데이터 흐름을 이해하기 전에, 간단하게 90's부터 이어져온 ,전통적인 Web Model에서의 Data 흐름을 봅시다. 그래야 React가 왜 FLux를 썻는지 더 잘 와닿습니다. 전통적인 Web Model (MVC) React 또한 MVC 모델을..
[React/style/Basic] React Component에 스타일 적용하기
Style 적용 웹 문서에서 스타일을 적용하기 위한 방법은 1가지 밖에 없다. "CSS"를 적용해줘야한다. 하지만, 이 CSS를 "작성하는 방법"자체가 엄청 많아서, 우리에게 웹 스타일을 하기위한 방법이 아주 많아보일 뿐이다. 크게 3가지 방법이 있다. HTML에 직접적으로 적용하는 Inline-style , 태그를 이용하는 방법,link 태그를 이용해서 css파일을 따로 작성하는 방법이 있다. JS에서 CSS를 적용하는 방법도 이 HTML에 CSS를 적용하는 방법 3가지를 "JS로 DOM객체 컨트롤"할 뿐, 똑같다. 예를들어, DOM 객체 안에 Style ={}식으로 주는 방법은 태그에 직접적용한다는 관점에서 inline-style이라는 점에는 변함이 없다. 보통은 class,id를 통해서 CSS Fi..
[React/flow/JS/Basic/hook] React의 Component의 흐름(Flow)
Component의 흐름?? 프론트엔드에서는 "비동기"함수가 일상적입니다. 예를들어, addEventListener도 비동기함수이고, setInterval과 같은 이벤트 루프도 다 비동기 함수입니다. 즉, 나의 코드의 순서와 실행순서가 다르다는 이야기이고, 논리는 맞지만 실행순서가 의도와 다르게 될 수 있습니다.(생각보다 빈번하다) 따라서, React에서는 Component 간의 "흐름"을 잘 파악하는게 에러를 발생시키지 않을 수 있습니다. React LifeCycle이라는 용어가 따로 있을정도로 , React에서는 이러한 흐름을 잘 제어하는게 ,프로그래머의 중요한 역량 중 하나입니다. Like버튼 예제로 알아보자 Like 예제를 조금 변형해서 , Like 버튼을 누르면 , "좋아요를 눌렀어요!"라는 문..
[React/Basic/Component/State] React의 State
React는 Component로 이루어져 있다. React는 JSX 문법을 이용해서 ,다양한 HTML 태그들을 가지게 되었습니다. 그리고 , 그 Element(HTML태그)들의 모아 놓은걸 하나의 컴포넌트라고 합니다. React에서는 이 Component가 1개의 최소 단위이며, 기능적인 단위입니다. 쉽게 생각하면, return문이 있는 JS 모듈 한 개라고 생각하면 됩니다. React Component의 데이터 관리 React의 장점 중 하나인, 실시간 렌더링은 이벤트 루프와 같은 비동기 함수들과 함께 썼을 때 문제가 발생합니다. 이벤트는 "비동기"이므로, 이벤트가 실행이 되었을 때, 다시 딱 렌더링을 해줘야 했습니다. 즉 , 이벤트 발생시 마다 또 Render함수를 일일이 적어넣어줘야 했고, 그 반복..
[React/JS/SPA/Render] React의 Rendering
우선, React와 JS의 Render에서 차이점을 명확하게 봅시다. JSX로 뭐 HTML Element 찍어내는거 , 재사용성 좋아진거 맞습니다. 하지만 JS는 결국 Interaction이 중요합니다. 바닐라 JS는 변경이 일어나면 , Element들을 다 다시 그리게 됩니다. 이 코드를 우선 보시죠. const rootEl=document.getElementById("root"); const randomBtn = () =>{ const random = Math.floor(Math.random() * 10 + 1); const btnEl = ` ${random} ` rootEl.innerHTML = btnEl; } setInterval(randomBtn,2000); 2초마다 특정 이벤트가 발생했을 때,..
[React/JSX/Basic/반복문/조건문] JSX의 편리함
전 React를 다룬지 몇개월 안된 "아기"이지만, React를 다루어 보면서 느꼈던게 JSX를 이용하면서 HTML에 "변수"의 개념을 도입할 수 있었다는게 정말 편리했던것 같습니다. 이거 덕분에, 사실 생산성도 잘 챙길 수 있었던것 같습니다. 오늘은, 그 편리함에 대해서 더 와닿게 기록을 해보겠습니다. React에서는 JS를 쓸 수 있다 저는 React를 React Hook으로 먼저 배웠지만, Stack overflow 같은곳만 가도, class 기반의 컴포넌트들을 많이 볼 수 있습니다. 사실 , 사용하다보면 React는 완전 다른 생태계를 구축해서 다른 언어같지만, JS의 라이브러리일 뿐이죠! 즉 ,React에서도 JS를 사용할 수 있고 , JS와 JSX를 적절하게 섞어서 쓸 수 있습니다. 저번에 작..