이전글에서 Redux는 props 없이도 state를 공유할 수 있게 해준다고 했다.왜냐면 state 들을 자바스크립트 파일 하나에(store) 다 보관해서어떤 컴포넌트든 꺼내쓸 수 있도록 해주기 때문이다.이번 글에서는 Redux 보관함인 store에 state를 보관하고 꺼내는지 알아보자.  Redux / state 만드는 법 이전 글에서 만들어둔 store.js 파일에 다음과 같이 state 하나 만드는 코드를 작성해 보았다. import { configureStore, createSlice } from '@reduxjs/toolkit'let user = createSlice({  name : 'user', initialState : 'Park'})export default configureStor..

웹 프로그래밍을 하다보면 비슷한 UI를 여러번 반복해 주어야 할때가 있는데 (ex. 상품 리스트)보통 쌩자바스크립트에서는 for, forEach를 활용하여 코드를 확 줄일 수 있었다.React에서는 Map이 그와 비슷한 역할을 해준다.(JSX 중괄호에선 For 반복문을 사용할 수 없어 map 을 대신 사용한다.) Map 기본 사용법 Map 함수는 array 자료 갯수만큼 함수 안의 코드를 실행해준다.Array 자료 뒤에 메소드 형태로 붙고, 콜백 함수를 괄호 안에 적는다.이때 파라미터를 세 개까지 작명할 수 있다. array.map((element, index, array) => { // Return a new element based on the current element}); 여기서 element..

React를 최소 찍먹이라도 해본 사람이라면 state라는 개념을 들어본 적이 있을 것이다. 보통 중요한 데이터는 변수 대신 state에 저장한다고 알고 있는 사람도 있는데, 사실 이 state 의 용도는 변수랑 똑같다. 그럼 state을 굳이 왜 쓰는 걸까, 그냥 원래 쓰던 변수나 쭉 쓰면 안될까.   일단 React 쓰는 이유부터  state를 왜 쓰는지 알기 위해서는 일단 쌩자바스크립트 냅두고 굳이 React를 왜 쓰는지 알아야 한다.React 는 자바스크립트 ‘라이브러리’이다. 즉, 그냥 자바스크립트 편하게 짤려고 생긴 거다.React를 쓰는 이유는 여러가지가 있겠지만 가장 큰 이유는 바로Virtual DOM(가상 DOM)을 사용하여 DOM 업데이트를 최적화한다. 라는 것인데 쉽게 말하자면 원래는..

프론트엔드 개발에 있어서 React와 Vue는 가장 인기 있는 라이브러리와 프레임워크이다.. 두 프레임워크 모두 각각 고유한 장점과 단점이 있다. React와 Vue의 주요 특징, 장단점, 그리고 차이점에 대해 살펴보자.   ReactReact는 메타(Meta)에서 개발한 자바스크립트 라이브러리로, UI 컴포넌트를 구축하는 데 사용된다.. React는 단일 페이지 애플리케이션(SPA)을 개발하는 데 자주 사용되며, 대규모 애플리케이션에서의 성능과 유지보수성을 높이는 데 중점을 둔다. 장점 우선 React에는 가상 DOM 개념이 있다. 이 가상 DOM은 실제 DOM을 조작하기 전에 먼저 변경 사항을 적용하여 효율적으로 업데이트 한다. 이 가상 DOM은 성능 향상에 크게 기여하는 부분이 있다. React는 ..