# reactjs
React hook의 모든 것(4) (useState - lazy initialization)
1) useState와 lazy initialization https://yceffort.kr/2020/10/IIFE-on-use-state-of-react
React hook의 모든 것(3) (useLayoutEffect)
Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 (Render 자체가 화면을 다시 그리는 것이 아니라, Virtual Dom을 그림으로써 어떤 부분을 바꿔야할지 계산하는 과정임)Paint: 실제 스크린에 Layout을 표시하고
React hook의 모든 것(2) (useMemo)
useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게
GetIT 해커톤에서 밤샘 코딩한...ssul
작년 겨울, 이때까지의 개발은 완성된 하나의 서비스 보다는 그냥 코드 뭉탱이라고 느꼈다. 내년에는 완성된 하나의 서비스를 만들고 싶어서 방학때 HTML, CSS, JS 그리고 리액트에 대해 공부했다. 그리고 올해 운이 좋게도 '멋쟁이 사자처럼'이라는 이름만들어도 멋진
React hook의 모든 것(1) (useRef)
전에는 useState, useEffect로 거의 99프로의 코딩을 했었지만, 이제는 조금 달라져야하지 않을까 하여 useRef, useMemo, useLayoutEffect 등의 훅들을 정리하는 포스트를 작성하게 되었다. useRef 함수는 current 속성을 가지
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 1탄]
오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다.바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지, 또한 중요하게 공부할 만한 포인트는 어떤
JSX, 컴포넌트 리스트(feat. key, 재조정), 조건부렌더링
JSX란 JavaScript XML의 약자로, 리액트에서 사용하는 특수한 문법. JSX는 HTML과 매우 유사하지만 엄연히 다른 언어이며, JavaScript 코드에서 마치 HTML을 사용해 UI컴포넌트를 만드는 것 같은 편리한 개발 경험을 제공모든 프로퍼티 이름은 카
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 intro]
완성된 페이지는 대략 아래와 같은 모습이 될 것이다.포트폴리오 페이지아무튼간 위의 라이브러리와 기술들과 함께 재밌게 구현해 볼 예정이다.!
[요약] 2023년 리액트에 무슨 일이 일어나고 있는가?
What's Happening in React? 리액트(React)는 여전히 세계에서 가장 인기 있는 자바스크립트 라이브러리 중 하나지만 새로운 트렌드와 기술의 등장으로 리액트 개발 생태계는 계속 변화하고 있다. 위 영상(출처; Lama Dev)은 최근 React의
Redux
npx create-react-app my-app --template reduxRedux is a pattern and library for managing and updating application state, using events called "actions".
useState, re-rendering
State는 영단어 사전에 찾아보면 상태라는 의미를 가지고 있는데, 리액트에서도 비슷한 의미를 가지고 있다. useState라는 것은 상태를 관리한다는 목적으로 사용되는데, 이를 위해서는 리액트의 기본적인 구조부터 다시 살펴볼 필요가 있다.지난 번의 글에서 위와 같은
Components
ReactJS의 코드 구성은 다음과 같다. 리액트를 아예 모르는 상태에서 보면 App이라는 함수가 HTML을 반환하는 형식이다. 저렇게 구성된 App은 기본적으로 생성된 index.js 파일에서 모듈 형태로 불러와지고, 다음과 같이 사용된다.create-react-ap
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 3탄]
코드편 3탄에서는 light(조명), shadow(그림자), material의 빛과 관련된 속성에 대해서 알아보도록 하겠다. 이번에도 역시, 같은 코드를 vanila javascript와 react 두 가지 방식으로 모두 작성해보겠다. vanila javascrip
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 2탄]
코드편 2탄은 여기서 마무리하고 3탄에서 계속 공부해보자!