전체 글

React Hook 이해하기 (1): useState

React의 useState 훅은 컴포넌트 내부에서 상태를 관리할 수 있게 해주는 가장 기본적인 도구 중 하나다. 상태 관리는 동적인 UI를 구현하는 데 매우 중요하며, 상태의 변화에 따라 컴포넌트가 어떻게 업데이트되고 렌더링되는지 이해하는 것이 핵심이다. 이 글에서는 useState가 어떻게 동작하는지, 그 내부 구조와 상태 관리의 메커니즘을 살펴보고, 효율적인 상태 업데이트 방법에 대해 설명할 것이다.useState의 기본 개념useState 훅은 배열을 반환한다. 이 배열에는 두 가지 값이 포함되어 있다: 상태 값과 상태를 변경하는 함수(setter). 이 훅을 사용하면, 상태 값을 설정하고 나중에 업데이트할 수 있는 변수와 그 상태를 업데이트할 수 있는 함수를 얻게 된다. 하지만 중요한 내부적인 ..

React에서의 Event Handler

React에서 이벤트 핸들러는 DOM 이벤트를 처리하는 중요한 역할을 한다. 특히, e.stopPropagation()과 e.preventDefault()는 자주 사용되지만 서로 다른 목적으로 사용되는 함수다. 두 함수를 혼동하지 않도록 주의해야 한다.e.stopPropagation() e.stopPropagation()은 이벤트 버블링을 멈추기 위한 함수다. 버블링은 이벤트가 발생한 요소에서 상위 요소로 전달되는 과정을 의미한다. 예를 들어, 버튼 클릭 이벤트가 버튼을 감싸고 있는 div나 그 외 상위 요소로도 전달될 수 있다. 이때 e.stopPropagation()을 사용하면, 클릭 이벤트가 상위 요소로 전파되지 않게 막을 수 있다. 상위 태그에 부착된 이벤트 핸들러들이 실행되는 것을 방지하는 데 ..

React와 JSX

서론JSX는 React와 밀접하게 사용되지만, 사실 JSX와 React는 서로 다른 개념이다. JSX는 문법 확장(syntax extension)이고, React는 JavaScript 라이브러리다. 많은 개발자들이 두 개념을 혼동하지만, JSX는 React와 독립적으로 사용할 수 있다. 이 글에서는 JSX의 정의, 왜 JSX를 사용하는지, 그리고 새로운 JSX 변환 방식이 등장한 이유에 대해 알아보겠다.JSX의 규칙 JSX는 HTML과 비슷해 보이지만, 좀 더 엄격하다. 또한 동적인 정보를 표시할 수 있는 기능이 있다. 이 점이 JSX를 단순한 HTML 대체물이 아니라 특별한 문법 확장으로 만들어준다. 반면 React는 상태 관리, 컴포넌트 기반 구조 등 다양한 기능을 제공하는 라이브러리다. 1. 하나의..

React에서 조건부 렌더링

서론 React에서 조건부 렌더링은 상황에 따라 특정 UI 요소를 표시하거나 숨기는 데 중요한 역할을 한다. 사용자가 인터페이스와 상호작용하거나 애플리케이션 상태가 변경될 때, 특정 요소를 렌더링할지 여부를 결정해야 할 때가 많다. 이 글에서는 조건부 렌더링의 여러 방법에 대해 살펴본다.null을 반환하여 아무것도 렌더링하지 않기 UI를 구성하다 특정 조건이 충족될 때 아무것도 렌더링하지 않기를 원할 수 있다. 예를 들어, 사용자가 선택하지 않은 항목은 목록에서 아예 보이지 않도록 하고 싶을 때가 있다. React 컴포넌트는 항상 무언가를 반환해야 하므로, 이 경우 null을 반환하면 된다.function Item({ name, isPacked }) { if (isPacked) { return n..

React 컴포넌트 이해하기: UI의 기본 단위

서론컴포넌트는 React로 UI를 구축하는 핵심 개념이다. 컴포넌트는 UI를 구성하는 블록으로, React 애플리케이션의 모든 요소는 컴포넌트로 나뉜다. 이번 글에서는 React 컴포넌트의 개념과 특징, 그리고 이를 효과적으로 사용하는 방법에 대해 살펴본다.컴포넌트란? 컴포넌트는 HTML, CSS, JavaScript 코드를 결합하여 재사용 가능한 UI 요소를 만드는 방법이다. 버튼의 rendering 로직과 markup을 한 컴포넌트 내에서 함께 관리함으로써, 이 둘이 항상 동기화 상태를 유지할 수 있게 한다. React에서는 JavaScript가 HTML을 관리하기에 rendering 로직과 markup이 같은 위치, 즉 컴포넌트 내에 존재한다. React 컴포넌트는 기본적으로 JavaScript 함..

React로 UI 구성: 단계별 접근 가이드

React로 사용자 인터페이스(UI)를 구축할 때는 먼저 UI를 구성 요소로 나누는 것부터 시작한다. 그런 다음 각 컴포넌트의 다양한 시각적 상태를 설명하고, 마지막으로 데이터를 통해 컴포넌트를 연결하게 된다. 이 글에선 React로 UI를 구축하는 단계별 접근 방법을 살펴보겠다.1단계: UI를 컴포넌트 계층으로 분해하기 UI를 React로 구축할 때 가장 먼저 해야 할 일은 UI를 컴포넌트 계층으로 분해하는 것이다. 이 과정에서 중요한 원칙은 단일 책임 원칙(Single Responsibility Principle)이다. 즉, 컴포넌트는 하나의 역할만 수행하도록 설계하는 것이 이상적이다. 만약 컴포넌트가 너무 커진다면, 이를 더 작은 컴포넌트들로 분해하는 것이 좋다. UI와 데이터 모델(json 형태를..

[JS] Promise와 Async/Await의 이해

서론 JavaScript에서 비동기 프로그래밍은 중요한 주제 중 하나이다. 비동기 작업은 코드의 흐름을 방해하지 않고, 동시에 여러 작업을 처리할 수 있게 해준다. 이러한 비동기 작업을 효율적으로 처리하기 위해 Promise와 Async/Await라는 두 가지 주요 도구가 있다. 이 글에서는 Promise가 무엇인지, 그리고 Async/Await와의 차이점이 무엇인지에 대해 좀 더 깊이 있게 다루고자 한다.PromiseJavaScript는 기본적으로 단일 스레드로 동작하기 때문에, 코드가 순차적으로 실행된다. 그러나 웹 애플리케이션에서는 네트워크 요청, 파일 입출력, 타이머 등 시간이 걸리는 작업을 처리해야 하는 경우가 많다. Promise는 비동기 작업이 완료되었을 때 결과를 사용할 수 있게 해주는 객..

네이버 부스트캠프 웹 풀스택 9기 챌린지 합격 후기

부스트캠프 챌린지 합격 후기 부스트캠프 챌린지 과정이 거의 끝나가는 지금, 챌린지에 붙기까지의 과정을 간단히 되돌아보며 후기를 남기고자 한다. 이 글은 부스트캠프 챌린지를 준비하는 이들에게 조금이나마 도움이 되길 바라는 마음으로 작성되었다.부스트캠프에 도전하려면 총 2개의 시험을 통과해야 한다. 그 후 챌린지 과정을 거치고, 마지막 3차 시험을 통해 최종 교육과정인 멤버십 과정에 들어갈 수 있는 사람을 선별한다. 올해부터 부스트캠프 챌린지 과정의 입과 시험이 바뀌었는데, 기존의 코딩 테스트만 있던 방식에서 CS 지식을 묻는 문제가 추가되었다.1차 코딩 테스트 1차 코딩 테스트는 매우 간단한 문제들 위주로 출제된다. 부스트캠프 측은 홈페이지에서 기본적인 CS 지식을 가진 사람을 원한다고 설명했기 때문에, ..