React

Redux 란? Redux는 리액트 애플리케이션에서 상태를 관리하기 위한 상태관리 라이브러리 입니다 Redux를 사용하면 전역 상태를 관리할 수 있으며, 이는 여러 컴포넌트에서 사용되는 데이터를 쉽게 공유하고 업데이트 할 수 있도록 해줍니다 Redux의 핵심개념은 "store", "reducer", "action" 입니다 store은 애플리케이션의 전역상태를 저장하는 객체이며, action은 상태를 업데이트 하기 위한 객체입니다 reducer은 action에 따라 상태를 어떻게 업데이트 할지 정의하는 순수함수 입니다 Redux를 사용하면 컴포넌트에서 store에 있는 데이터를 읽고, action을 dispatch 하여 상태를 업데이크하고, reducer를 통해 새로운 상태를 반환받을 수 있습니다 이를 통..

React Custom Component 중에서 가장 난이도가 높았던 autocomplete이다. 상당히 코드가 길고 관련있는 함수와 state들이 섞여있어 처음부터 감을 잡기가 어려웠다. 하지만, 포기할 수는 없지 될때까지 하는 스타일인 나는 하나하나 코드를 뜯어보며 이해하기로 했다 어떤 리액트 코드를 볼때, 그 코드를 보고 바로 구조를 잡기란 쉽지 않다. 그래서 3가지 기준을 가지고 구조를 파악한다 첫번째, 컴포넌트끼리 tree 구조를 만든다 두번째, state가 어디서 정의되어서 어디로 흐르는가? 세번째, 함수가 어디서 정의되어서 어디로 흐르는가? 이 3가지 기준을 고려하면서 간단한 그림을 그려보았다. (쉽지는 않았다... 애썻다 내자신) 코드는 너무 기니까, styled component와 rea..

요즘에 과제를 하면서 점점 코드가 길어지니까 어지러워지는 느낌이예요. 특히 코드가 길고, 파일이 여러개 있을때는 전체적인 구조를 파악하는 것이 중요한데요. 오늘 과제는 그림도 그려보면서 전체적인 구조 파악에 중점을 둬서 보도록 하겠습니다 구조파악 3단계 1. 컴포넌트 기준으로 tree 구조 작성 2. state가 어디서 정의되고, 내려오고 있는지 3. 함수가 어디서 정의되고, 내려오고 있는지 1,2,3 번을 보여주는 간단한 그림을 그려봤습니다 컴포넌트만 속속 골라서 부모 자식관계에 따라 tree 구조도를 그려보았습니다. (크롬 익스텐션 사용하는 것도 좋음) 자식컴포넌트 어떻게 찾냐구요? 리턴문에 가서 찾는다! App 이라는 부모 컴포넌트에서 자식 컴포넌트인 ItemListContainer, Shoppin..

어제 custom component를 다루면서 props와 state 부분을 짚고 넘어가야겠더라고요! 그래서 chat gpt와 공식문서를 참조하면서 리액트 props와 state의 차이점 정리해보았습니다 Q. 리액트에서 props와 state의 차이점React에서 props와 state는 모두 컴포넌트의 데이터를 다루는 데 사용됩니다. 그러나 두 가지 개념은 목적과 사용 방법에서 차이가 있습니다. props는 "properties"의 줄임말로, 컴포넌트가 외부에서 받는 데이터를 의미합니다. 즉, 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터입니다. props는 읽기 전용이므로 컴포넌트 내부에서 직접 수정할 수 없습니다. 대신, 부모 컴포넌트에서 값을 변경하여 자식 컴포넌트가 새로운 값을 받게 됩니다..

화면이 아무리 복잡하고 다양하더라도 기본 구성에서 사용되는 UI들은 반복적으로 재사용되는 경우가 많습니다 오늘은 프로젝트 개발의 효율성을 높여주는 UI 컴포넌트들을 만들어보겠습니다 컴포넌트 ui - 모달 콘솔창을 띄워 element들을 눌러보면서 어떤 컴포넌트 위에 스타일이 들어가는 지를 잘 확인해야 합니다 일반 CSS와 달리 styled component는 class의 이름을 임의로 지정하여 (위에 "sc-dkPtyc ioRIXP" 라고 이상한 클래스 보이시져...) 스타일을 주기 때문에, 클래스의 이름이 확! 눈에 띄지 않을 수 있습니다. 하지만, 각 컴포넌트에 어떤 css 효과를 주었는지 촤르륵~ 볼 수 있어요! ( css 파일 열어서 html나 js 파일 왔다갔다, class 찾아 요리조리 하는것..

CCD (Componet Driven Development) 만약 기획자가 이전에 사용했던 버튼을 이번에도 사용하자고 합니다 그렇다면 디자이너와 개발자는 새롭게 버튼을 만들어야 할까요? 재사용 할 수 있는 UI 컴포넌트가 필요하겠죠! 이 고민을 해결하기 위해 등장한 개발 방법이 바로 Componet Driven Development(CCD) 입니다 레고처럼 부품 단위로 UI 컴포넌트를 만들고 조립해나가는 개발입니다 CSS in JS CSS가 복잡해짐에 따라, CSS도 컴포넌트 영역으로 불러들이게 됨! CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 됩니다. 이..

오늘은 뭘 해볼거냐면 JSON.stringify와 JSON.parse에 대해서 간단히 알아보고, localStorage 에 최근 본 상품의 id를 배열로 담아보는 기능을 만들어보겠슴다 JSON.stringify 와 JSON.parse 여기 한 객체가 있습니다 let obj = {name: 'kim'} 만약 이 상태로 localStorage.setItem('data', obj) 해버린다면 예쁜 {name: 'kim'} 요 상태로 저장이 되지 않고, localStorage의 value에 [object Object] 라며 객체가 깨져서 나올겁니다 깨져서 안나오고 이쁜 상태로 obj를 보존하려면 어떻게 해야할까? JSON.stringify로 obj를 감싸면 됩니다! 그렇다면 반대로 JSON 형식을 기존 객체 형..

실력향상 응용문제들 : 응용1. 표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면? 응용2. 주문하기 버튼 누를 때 이미 상품이 state안에 있으면 추가가 아니라 기존 항목 수량증가만? 응용1. 표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면? (Cart.js) # 상품명 수량 변경하기 삭제하기 {/*데이터 갯수에 맞게 표 생성해달라고 반복문쓰는 것도 좋을듯요*/} {/*map으로 html 생성할때 일단 {}부터 쓴다 */} { carts.map((item,i)=>{ return ( {carts[i].id} {carts[i].name} {carts[i].count} { dispatch((changeCount(carts[i].id))) }}>➕ {/*버튼을 누르면 상품이..