1. State란 무엇인가?state는 컴포넌트 내부에서 관리되는 동적 데이터입니다. 사용자가 애플리케이션과 상호작용할 때 데이터가 변경될 수 있으며, 이 변화는 React에 의해 자동으로 UI에 반영됩니다.React의 useState 훅을 사용하여 상태를 정의하고 업데이트합니다. 특징 • 내부 데이터: state는 컴포넌트 내부에서 선언되고 관리되며, 다른 컴포넌트가 직접 접근할 수 없습니다. • 변경 가능: state는 React의 상태 관리 메서드를 통해 변경할 수 있습니다. • UI 업데이트 트리거: 상태가 변경되면 해당 상태를 사용하는 컴포넌트는 리렌더링됩니다. 코드 예제: Counter 컴포넌트import React, { useState } from "react";function Counter..
CSS-in-JS 라이브러리 중 하나인 Emotion은 빠르고 유연하며 강력한 스타일링 솔루션을 제공합니다. React와 같은 JavaScript 기반 프레임워크에서 CSS를 더욱 효율적으로 관리할 수 있도록 설계되었으며, 개발자 경험을 극대화하는 도구로 널리 사랑받고 있습니다. Emotion CSS란?Emotion은 JavaScript를 사용하여 CSS를 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. 기존의 CSS 파일 관리의 복잡함을 줄이고, 컴포넌트 기반 스타일링을 통해 코드 재사용성과 유지보수성을 높이는 데 초점이 맞춰져 있습니다.주요 특징 1. CSS-in-JS: JavaScript 파일 내에서 CSS를 작성할 수 있습니다. 2. 스타일 컴포넌트 생성: CSS 클래스 이름 충돌을 ..
useStateuseState란?useState는 React에서 함수 컴포넌트 내부에서 상태(state)를 관리하기 위해 사용하는 Hook입니다. 이전에는 클래스 컴포넌트에서만 상태를 관리할 수 있었지만, Hook이 도입되면서 함수 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 사용법useState는 초기 상태를 인수로 받아들이며, 현재 상태 값과 상태를 업데이트할 수 있는 함수를 배열로 반환합니다.const [state, setState] = useState(initialValue); • state: 현재 상태 값. • setState: 상태를 업데이트하는 함수. 코드 예제import React, { useState } from "react";function Counter() { const [c..
바닐라 익스트렉트(Vanilla Extract) 소개바닐라 익스트렉트(Vanilla Extract)는 CSS를 JavaScript처럼 사용할 수 있는 CSS-in-JS 라이브러리입니다. 기존 CSS 작성 방식의 단점을 보완하고 JavaScript의 장점을 활용해 스타일링을 더욱 체계적이고 효율적으로 관리할 수 있도록 돕습니다. 이 라이브러리는 스프링클(Sprinkles), 디파인드 프러퍼티(DefineProperties) 등의 함수를 통해 스타일 속성을 선언하고 재사용할 수 있는 기능을 제공합니다. 이를 통해 CSS 클래스 이름 충돌, 코드 중복, 관리 어려움 같은 문제를 해결하며, 더 나아가 타입 안정성과 제로 런타임(zero runtime)이라는 강력한 특징을 제공합니다. 바닐라 익스트렉트의 장점 1..
💻 결과화면 📕 새로 알게된 개념 ✔ 리덕스가 생성, 실행 하는 과정 동작 과정을 간단하게 정리해서 새로운 개념들을 먼저 이해하고 어떻게 동작하는지를 먼저 파악했다. - action : 프로젝트 상태에 변화를 일으킨다. - reducer : 액션 객체를 받아서 상태를 어떻게 변경할 것인지 정의하는 함수 - store : 스토어는 리덕스에서 state를 저장하고 관리하는 객체 - render : UI를 렌더링하는 메서드 혹은 함수 - subscribe : 스토어가 변경될 때마다 render함수가 호출되도록 하는 역할 - dispatch : 액션을 발생시키는 것 ✔ 리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 한다. 이 말이 처음에는 굉장히 모순이라고 생각했다. 변하지 않는 속성을 ..
💻 결과화면 context API를 이용하여 색상을 선택하면 상자의 색상이 변경되는 기능을 구현해 보았다. 마우스 좌클릭 하면 큰 상자의 색 변경 마우스 우클릭 하면 작은 상자의 색 변경 프로젝트 깃허브 주소 : https://github.com/devuoon/context-tutorial 📒 Context API context API는 무엇이고 왜 쓰는 것일까? 일반적인 React에서는 props를 통해 데이터를 부모로부터 자식 요소로 전달하는데 이 때 여러 컴포넌트에 전달해야 하는 props의 경우에 과정이 매우 복잡해질 수 있다. 과정이 복잡해진다는 것은 유지 보수가 어렵고 프로젝트가 커질 수록 데이터 관리도 어려워 진다. 이 때 사용하는 것이 context API 이다. 즉, Context API..
💻 결과화면 https://newsapi.org/ 에서 제공하는 API를 이용하여 카테고리별로 최신 뉴스 목록을 보여주는 뉴스 뷰어를 구현해 보았다. 📕 프로젝트 관련 개념 콜백 함수 : 자바스크립트에서 비동기 작업을 할 때 가장 흔히 사용하는 방법으로 함수 자체를 또 다른 함수의 인자로 전달해주는 것을 말한다. Promise : Promise는 콜백 지옥과 같은 코드가 형성되지 않게 하는 방안으로 .then을 사용하여 다음 작업을 설정하기 때문에 콜백 지옥이 형성되지 않는다. newsapi API 키 발급하기 - 전체 뉴스 불러오기 GET https://newsapi.org/v2/top-headlines?country=kr&apiKey=8602958015cb4cd9aebcd69bff10175b - 특정..
