프로젝트에서 2차원 표 형식의 테이블에 input 태그를 이용해 값을 렌더링하는 부분이 있었다. 이 부분에서 수정이 가능해야 한다는 기능 요구가 있었다.그래서 각 input 태그의 onChange 속성에 핸들러 함수를 할당했지만 한번 입력하면 포커스아웃되는 이슈가 있었다.{ tableData.map((data, idx) => { return ( { data.map((info, i) => { if (info.type === 'checkbox') { return ( ) } ..
REACT
리액트의 렌더링부라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정이다. 사용자가 보게되는 결과물을 만드는 작업이기 때문에 중요한 과정이며 렌더링 방식이 성능에 큰 영향을 주게된다. 리액트의 렌더링이란리액트에서의 렌더링은 브라우저 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이는 모든 컴포넌트들이 갖는 props와 state의 값을 기반으로 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정이다.해당 컴포넌트가 props와 state 같은 상태값을 갖고 있지 않다면 반환하는 JSX 값에 기반해 렌더링이 일어나게 된다. 리액트 렌더링 트리거리액트에서 렌더링이 발생하는 시나리오는 다음과 같다.최초 렌더링: 사용자가 처음 애플리케이션에 진입한 경우클래..
함수 컴포넌트는 리액트 0.14 버전부터 만들어진 꽤 역사가 싶은 컴포넌트 선언 방식이다.var Aquarium = (props) -> { var fish = getFish(props.species) return {fish}}var Aquarium = ({species}) => {getFish(species)} 이때 당시의 함수 컴포넌트는 클래스 컴포넌트에서 생명주기 메서드나 상태가 필요없이 render만 하는 경우에만 제한적으로 사용됐다. 하지만 함수형 컴포넌트에 Hook이 등장하며 복잡한 클래스 컴포넌트보다 함수 컴포넌트를 더 많이 쓰기 시작했다. 클래스 컴포넌트기존 리액트 16.8 미만으로 작성된 코드에는 클래스 컴포넌트가 대다수일 것이다.var Aquarium = (props) -> { v..
리액트의 특징으로 가장 많이 언급된 것 중 하나는 바로 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 하지만 가상 DOM이 외 만들어졌는지, 실제 DOM과 어떻게 다른지, 그리고 정말 실제 DOM을 조작하는 것보다 빠른지에 대해서는 잘 모르는 경우가 많다. DOM과 브라우저 렌더링 과정DOM은 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 브라우저가 웹 사이트 접근 요청을 받고 화면을 그리는 과정에서 정확히 어떤한 일은 아래의 과정과 같다.브라우저가 URL에서 HTML 파일을 다운로드한다.HTML을 파싱하여 DOM 노드 트리를 만든다.(2)번 과정에서 CSS 파일을 만나면 CSS 파일을 다운로드한다.CSS도 파싱해 CSSOM을 구성한다.(2)번 DOM 노드를 순회..
JSX(Javascript XML) 란?보통 리액트를 통해 JSX를 접하기에 JSX가 리액트의 전유물로 생각하는 경우가 많다. 하지만 JSX는 리액트에서 사용하는 것은 맞지만 리액트와는 독립적으로 동작하는 문법이다. JSX는 ECMAScript 자바스크립트 표준의 일부는 아니기 때문에 코드를 바로 실행하면 에러가 발생한다. 그렇기 때문에 JSX는 반드시 트랜스파일러를 거쳐야 JS 런타임이 이해할 수 있는 JS 코드로 변환 된다. JSX는 HTML이나 XML을 JS 내부에 표현하는 것이 유일한 목적은 아니며 JSX 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성해 두고, JSX를 트랜스파일 과정을 거쳐 JS가 이해할 수 있는 코드로 변경하는 것이 목적이다. JSX의 정의JSX는 기본적으로 JSXEle..
이전 시간에는 라즈베리파이(이하 라파)에 DB(MariaDB)를 연결했다. 이제 nodejs를 설치하고 React 애플리케이션을 배포해보도록 하자. NodeJS 설치NodeSource의 레포지토리를 이용해 최신 버전의 Node.js를 설치할 수 있다.curl -sL https://deb.nodesource.com/setup_20.x | sudo bash - 위의 코드에서 setup_[숫자].x 의 숫자는 설치하고자 하는 Nodejs의 버전을 의미하며 이 글 아래에서는 Nodejs 버전을 업그레이드 혹은 다운그레이드 하는 방법을 정리할 것이다. 이제 Nodejs를 설치해보자.sudo apt install nodejs 설치가 끝났다면 설치된 Nodejs의 버전을 확인해보자.node --version pm2..
