Front-End/React

[React] Zustand란? 사용하는 이유! (상태 관리 라이브러리, 사용 방법 예시)

Zustand는 독일어로 '상태'라는 뜻으로 React 생태계에서 사용하는 상태 관리 라이브러리입니다. 현재 Redux가 압도적으로 많이 사용되고 있지만, 문법이 더러운 편이라 학습에 시간이 필요합니다. Post Redux로서 사용자가 빠르게 늘고 있는 힙한 곰돌이 친구 Zustand에 대해서 알아봅시다. 😎 📝 사용하는 이유 ⦁ React에서 데이터는 단방향 기본적으로 React의 데이터 흐름은 State & Props를 사용해 단방향으로 이루어져야 한다는 원칙이 있습니다. 이러한 데이터 흐름은 단순하고 예측 가능하며, 컴포넌트 간의 관계를 명확히 정의하기 때문에 유지 보수성을 향상시킵니다. ⦁ 음.. 컴포넌트가 너무 많으면? 하지만 데이터를 전달하는 과정에서 거쳐야 하는 컴포넌트가 너무 많은 상황이라..

[React] 리액트 CSS 초기화란? (CSS Reset, 여백 제거)

React 프로젝트를 생성하면 기본적으로 Padding, Margin 등 CSS가 적용되어 있습니다. 또한, 브라우저마다 태그를 렌더링 하는 기본 스타일이 다릅니다. 따라서 원하는 디자인을 구현하기 위해 기본적인 CSS를 초기화 시켜주는 작업이 필요합니다. 😀 📝CSS 초기화 방법 https://meyerweb.com/eric/tools/css/reset/index.html CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and ..

[React & Vue] 조건부 렌더링이란? (사용 예시, 사용 목적)

조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 뜻합니다. 주로 React, Vue, Angular 등의 프론트엔드 프레임워크에서 사용되고, 각각 조건부 렌더링을 처리하는 특별한 문법이 제공됩니다. 그렇다면 어째서 조건부 렌더링이라는 개념이 등장하게 되었고, 왜 필요한 건지 알아봅시다. 😎 📝조건부 렌더링 사용방법 ⦁ 웹 개발 초기 환영합니다! 사실 조건부 렌더링은 초기 웹 개발부터 존재한 개념입니다. React와 같은 프론트엔드 라이브러리의 등장 이후 점점 더 많이 사용되기 시작한 개념이지만, 웹 개발에서 조건부 렌더링을 사용하는 것은 이전부터 일반적인 방법 중 하나였습니다. 당시에는 동적인 UI를 구현하기 위해 JavaScript와 HTML을 활용했습니다. ⦁ 프론트엔드 프레임워크..

[TypeScript] 타입스크립트란? (개념, 문법 총 정리)

2012년 마이크로소프트가 발표한 타입스크립트는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. Stack Overflow에서 개발자가 가장 좋아하고 관심을 가지는 프로그래밍 언어 2위로 선정되었습니다. 또한, 개발자 채용공고를 보면 우대사항에 타입스크립트가 거의 항상 기재되어 있습니다. 이젠 거의 필수 교양이 되어버린 타입스크립트에 대해서 알아봅시다. 📝 타입스크립트의 특징 ⦁ 컴파일 언어, 정적 타입 언어 자바스크립트(JS)는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견합니다. 하지만 타입스크립트(TS)는 컴파일 언어입니다. 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 JS코드로 변환됩니다. 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고, 미리 타입을..

[React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기

State는 부모 → 자식으로 밖에 값을 전달하지 못한다고 배웠습니다. 하지만 컴포넌트를 분리했을 때 자식 컴포넌트에서 연산한 데이터를 부모에서 사용하고 싶은 경우가 있습니다. Redux 등 전역 상태관리 라이브러리를 사용하지 않고도 할 수 있는 방법을 찾았습니다.😀 함수를 전달하면 됩니다. 👍 📝 자식 컴포넌트 → 부모 컴포넌트 ⦁ 📑 부모 컴포넌트 //전달 함수 const [audio, setAudio] = useState({}) const getAudio = (x) => { setAudio(x) } //return 문 ... //state 넘기듯이 함수도 넘길 수 있습니다. ✔ 자식 컴포넌트에 전달할 함수를 선언합니다. 해당 함수를 자식에서 사용하면 결과적으로는 부모 컴포넌트의 State가 변경되어..