JavaScript48 자바스크립트의 index.js 우리가 자바스크립트를 사용하여, 정확히는 노드를 이용하여 프로젝트를 만들다보면 굉장히 독특한 파일 시스템 규칙 하나를 자연스레 발견하게 됩니다. 바로 index 파일입니다. index란? 사전에서의 색인과 같은 의미로 프로그래밍에서 널리 사용되는 단어입니다. 메모리 구조 상의 위치를 나타낼때도 많이 사용되고, 반복문의 카운트에 자주 사용되는 i 가 바로 "index" 의 약어입니다. 이렇게 사용하는 인덱스가 자바스크립트에서는 조금 다른 용법으로 쓰이기도 합니다. index를 이용한 간결한 import / export 이러한 파일 구조를 가진 프로젝트가 있다고 하겠습니다. 현재는 많은 파일을 불러오지 않아 import 구문이 그다지 길지 않습니다. 그러나 프로젝트가 점점 복잡해지며 점점 많은 모듈을 불러오.. 2022. 8. 23. JSX 알아보기 JSX는 리액트를 사용한다면 많은 분들이 익히 만나보셨을 문법입니다. 저도 리액트 프로젝트를 하며 당연하게 사용하고 있지만 안타깝게도 JSX가 무엇인지, 정확히 어떤 역할을 하고 있는지는 잘 모르고 있습니다. 오늘은 공식 문서와 몇 가지 예제를 통해 JSX에 대해 조금 더 깊게 알아보겠습니다. JSX가 왜 필요할까요? const element = Hello, world!; 위 코드는 공식 홈페이지에 기재된 가장 간단한 JSX 예시입니다. 변수 element에 할당된 태그로 감싸진 구문이 바로 우리가 알고있는 JSX입니다. 잠시 리액트가 아닌, 순수한 자바스크립트를 사용하던 시절로 돌아가보겠습니다. 우리의 프로젝트는 대략 이런 방식을 따라 흘러가게 됩니다. 자바스크립트 파일이 정적인 HTML, CSS 문서.. 2022. 7. 24. React.Memo 사용하기 React의 컴포넌트는 props라고 하는 입력을 받아 화면을 나타내는 JSX 엘리먼트를 반환합니다. 이러한 컴포넌트의 조합을 통해 우리가 보는 페이지를 구성하고, 하나의 완성된 결과물을 출력할 수 있게 됩니다. 리액트는 상황에 따라 다양한 화면을 보여주기 위해 지속적으로 컴포넌트를 갱신하는데, 이를 리렌더링이라고 합니다. 리렌더링 덕분에 컴포넌트는 정적인 반환에서 벗어나 많은 역할을 할 수 있었습니다. 컴포넌트가 사용자가 원하는 화면을 반영하려면 언제 리렌더링이 일어나야 할까요? 가장 확실한 방법으로는, 매 밀리초마다 컴포넌트를 렌더링 하면 정보의 누락없이 항상 최신 상태의 컴포넌트를 보여줄 수 있습니다. 하지만 그 방법은 너무 많은 리렌더링이 일어나고, 많은 리렌더링은 나쁜 사용자 경험으로 이어지기 .. 2022. 7. 11. 리액트의 추가 훅 (React Additional Hooks) 이전 포스팅인 리액트의 기본 훅에서 이어집니다. 리액트의 추가 훅 지난번에 소개한 리액트의 기본 훅 세 가지에 더해, 리액트에서는 총 일곱 가지의 추가 훅을 제공합니다. 추가 훅은 기본 훅들에 약간의 변경을 더하거나, 특별한 경우에 사용할 수 있도록 설계되었습니다. 하나씩 알아보겠습니다. useReducer import { useReducer } from 'react'; const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer는 useState를 대체하는 훅입니다. useState가 단순히 상태를 선언하고, setState 함수를 반환해 준 것에 더해서 useReducer는 다양하고 복잡한 로직들을 dispatch를 통해 처리.. 2022. 5. 17. 리액트의 기본 훅 (React Basic Hooks) 훅의 등장 리액트가 함수형 컴포넌트를 지원하기 시작하며 사람들은 기존의 길고 복잡한 클래스 컴포넌트에서 벗어나 간단한 함수로도 컴포넌트를 만들 수 있었습니다. 하지만, 함수에는 고질적인 문제점이 있었습니다. 바로 함수는 자신의 상태를 가질 수 없다는 것입니다. 함수가 상태를 가질 수 없다보니, 클래스 컴포넌트가 할 수 있던 다양한 작업들을 수행하기가 어려웠습니다. 이 문제를 해결하기 위해 등장한 기술이 바로 훅(Hook)입니다. 훅은 컴포넌트에서 상태를 다루는 작업들을 추상화시킨 로직들의 집합입니다. 클래스 컴포넌트에서 사용하던 생명 주기 메서드와 같은 대부분의 상태 관련 기능들을 함수형 컴포넌트에서도 훅을 통해 사용할 수 있습니다. 리액트 훅 이 글이 작성된 시점은 React 18.0.0 버젼을 기준으.. 2022. 5. 13. 클래스 컴포넌트와 함수 컴포넌트 (Class Component / Functional Component) 리액트 컴포넌트 리액트의 컴포넌트는 크게 두 종류로 나눌 수 있는데, 클래스로 이루어진 클래스 컴포넌트와 함수로 이루어진 함수 컴포넌트가 있습니다. 둘 중 어떤 방법으로 컴포넌트를 생성하더라도 우리의 리액트 프로젝트는 정상적으로 작동 할 것입니다. 그런데 왜 리액트는 두 가지 방식의 컴포넌트를 모두 사용할까요? 등장 배경 사실 함수 컴포넌트는 처음 리액트가 나올때는 존재하지 않았던 기술입니다. 이전까지의 리액트 컴포넌트들은 클래스 컴포넌트로만 구성할 수 있었고, 함수형으로 작성하는 컴포넌트는 몇 번의 업데이트 이후에야 등장하였으며 안정적으로 사용되기까지 약간의 시간이 더 필요했습니다. 물론 함수 컴포넌트는 클래스 컴포넌트에 비해 훨씬 적은 양의 코드로도 외적으로 동일한 기능을 수행할 수 있었고, 기존의 .. 2022. 5. 3. 이전 1 2 3 4 5 ··· 8 다음
