store(Redux)에 저장된 state가 array, object 자료인 경우 state 변경을 좀 쉽게 편리하게 할 수 있습니다. redux state가 array/object인 경우 변경하려면 아래의 state에서 kim을 park으로 변경하고 싶으면 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ return {name : 'park', age : 20} } } }) 당연히 저렇게 쓰면 changeName()사용시 변경됩니다. 근데 state를 직접 수정하라고해도 변경 잘 됩니다. state를 직접 수정하는 문법을 사용해도 잘 변경되는 이유는 ..
Redux의 state를 변경하고 싶으면 변경하는 법이 따로 존재합니다. 1. store.js에 state 변경해주는 함수부터 만들어주고 2. export 해두고 3. 필요할 때 import 해서 쓰면 되는데 dispatch()로 감싸서 써야합니다. Q. 컴포넌트에서 state 직접 수정하면 편하지 않나요? 당장은 편할수는 있어도 프로젝트가 커지면 심각한 단점이 발생할 수 있습니다. 컴포넌트 100개에서 직접 'kim'이라는 state 변경하다가 갑자기 'kim'이 123이 되어버리는 버그가 발생하면 원인을 찾기 위해 컴포넌트 100개를 다 뒤져야합니다. 하지만 아래처럼 state 수정함수를 미리 만들어놓고 컴포넌트는 그거 실행해달라고 부탁만 하는 식으로 코드를 짜 놓으면 버그가 발생했을때 이유 찾기가 ..
Redux라이브러리를 왜 쓴다고 했냐면 state를 Redux store에 보관해둘 수 있는데 모든 컴포넌트가 거기 있던 state를 직접 꺼내쓸 수 있어 props없어도 편리하게 state공유가 가능하다고 했습니다. 이번에는 Redux store에 state보관하는 법을 알아봅시다. Redux stroe에 state 보관하는 법 저번시간에 만든 store.js에 아래와 같이 코드를 짜면 state하나를 만들 수 있습니다. createSlice()로 state 만들고 configureStore()안에 등록합니다. import { configureStore, createSlice } from '@reduxjs/toolkit' let user = createSlice({ name : 'user', initi..
/cart로 접속하면 장바구니 페이지를 보여줍시다. 근데 장바구니 기능은 Redux를 이용해서 만들어봅시다. 장바구니 페이지 만들기 페이지 하나 필요하면 라우터를 사용하면됩니다. 를 하나 추가했습니다. 누가 /cart로 접속하면 컴포넌트를 보여주기로 했습니다. Cart.js를 만들어서 Cart 컴포넌트를 만들어줍니다. 장바구니 페이지에서 사용할 Table 레이아웃 아래의 코드를 사용하면 표가 생성됩니다. (React-bootstrap)에서 가져왔습니다. 상단에서 import 해줍니다. # 상품명 수량 변경하기 1 안녕 안녕 안녕 Redux를 쓰면 Redux는 props없이 state를 공유할 수 있게 도와주는 라이브러리 입니다. js파일 하나에 state를 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼..
App에 있던 state를 TabContent 컴포넌트에서 사용하고 싶어지면 어떻게 할까요? App -> Detail -> TabContent 이렇게 props를 2번전송합니다. 이게 번거로우면 Context API 문법을 사용하거나 Redux 같은 외부라이브러리를 사용하면 됩니다. 오늘은 Context API에 대해 알아봅시다. Context API 문법으로 props없이 state공유 scnt라는 state를 App 컴포넌트에 만듭니다. 이걸 TabContent라는 자식컴포넌트에서 쓰고 싶다고 하면 ContextAPI문법을 사용하면 됩니다. 1. 일단 createContext()함수를 가져와서 context를 하나 만들어줍니다. context를 쉽게 비유해서 설명하자면 state보관함 입니다. (Ap..
css 애니메이션을 만들고 싶으면 애니메이션 동작 전 스타일을 담을 className 만들기 애니메이션 동작 후 스타일을 담을 className 만들기 transition 속성도 추가 원할 때 2번 탈부착 탭의 내용이 서서히 등장하는 fade in 애니메이션을 만들어보겠습니다. 1. 애니메이션 동작 전 2. 애니매이션 동작 후 className만들기 CSS파일을 열어 다음과 같이 작성합니다. 애니메이션 동작 전엔 투명도가 0, 동작 후엔 투명도가 1이 됩니다. .start { opacity : 0 } .end { opacity : 1; } 3. transtion 추가 transition은 "해당 속성이 변할 때 서서히 변경해주세요~"라는 뜻입니다. 그럼 이제 원하는 요소에 start 넣어두고 end를 탈..
오늘은 쇼핑몰에서 흔히 볼 수 있는 탭 ui를 만들어보겠습니다. 버튼 3개와 박스 3개를 미리 만들어놓고 누를 때 마다 그에 맞는 박스 보여주는게 탭 UI입니다. 1. HTML CSS로 디자인 미리 완성 2. UI의 현재상태를 저장할 state 하나 만들기 3. state에 따라서 UI가 어떻게 보일지 작성 1.HTML,CSS로 탭 디자인 미리 완성 버튼3개와 3개가 필요합니다. react-bootstrap 사이트에서 버튼을 가져왔습니다. 문서를 보니 eventKey속성은 버튼마다 맘대로 작성하면 된다고 합니다. defaultActiveKey 여기는 페이지 로드시 어떤 버튼에 눌린효과를 줄지 결정하는 부분입니다. 버튼0 버튼1 버튼2 내용0 내용1 내용2 2. UI의 현재 상태를 저장할 state 하나 ..
서버란? 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다. 예를들어보면 네이버웹툰 서버 : 유저가 웹툰 요청하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상 요청하면 영상 보내주는 프로그램 사용자가 데이터를 요청하면 서버가 그냥 보내주진 않습니다. 서버에 데이터를 요청할 때는 정확한 규격에 맞춰 요청해야합니다. 1. 어떤 데이터인지(URL 형식으로) 2. 어떤 방법으로 요청할지( GET or Post) 데이터를 가져올 때는 보통 GET을 고르고 데이터를 서버로 보낼 때는 POST 고르면 됩니다. 그리고 어떤 데이터를 보고싶은지 URL만 잘 기재하면됩니다. 예를 들어서 김부장이라는 네이버웹툰을 보고싶으면 https://comic.naver.com/webtoon/list?..
컴포넌트 페이지에서 2초후에 div박스가 사라지게 해보겠습니다. let Box = styled.div` background:yellow; padding:20px; ` function Detail(){ let[temp,settemp] = useState(0); useEffect(()=>{ setTimeout(()=>{ settemp(1); },2000) }) return ( { temp==1 ? null : } ) } 위의 코드를 실행시켜보면 2초후에 박스가 사라집니다. 근데 []를 useEffect에 사용하면 더 좋은 코드가 나옵니다. useEffcet 실행조건 useEffect()의 둘째 파라미터로 []를 넣을 수 있는데 거기에 변수나 state같은 것들을 넣을 수 있습니다. 그렇게하면 []에 있는 변..
컴포넌트의 Lifecycle 우리가 만들고 쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있습니다. 컴포넌트도 인생이 있다는 말입니다. 컴포넌트는 생성이 될 수도 있고 ( mount ) 재렌더링이 될 수도 있고(update) 삭제가 될 수도 있습니다( unmount ) 컴포넌트의 Lifecycle을 배우는 이유는 컴포넌트 Lifecycle 중간중간에 간섭할 수 있기 때문입니다. 간섭이 뭐냐면 코드실행인데 컴포넌트가 장착이 될 때 특정코드를 실행할 수 도 있고 컴포넌트가 업데이트될 때 특정코드를 실행할 수 도 있다는 겁니다. 간섭하는 방법 " Detail 컴포넌트 등장 전에 이것좀 해줘" " Detail 컴포넌트 사라지기 전에 이것좀 해줘" " Detail 컴포넌트 업데이트 되고나서 이것좀 해줘" 이렇..
컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데 1. class 만들어 놓은걸 까먹고 중복해서 또 만들거나 2. 갑자기 다른 이상한 컴포넌트에 원하지 않는 스타일이 적용 3. css파일이 너무 길어져서 수정이 어려운경우 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데 styled-components라는 인기 라이브러리를 설치하여 이용하면됩니다. 설치는 터미널을 열어서 npm install styled-components 을 입력해주고 그리고 사용하고 싶은 컴포넌트 맨위 상단에서 import해옵니다. import styled from 'styled-components' styled-components 사용법 이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 ..
리액트 폴더구조 리액트는 html을 만들어주는 라이브러리 입니다. 그래서 만들 파일들은 95%확률로 .js 파일이기 때문에 비슷한 .js 파일끼리 한 폴더에 묶어놓으면 그게 좋은 폴더구조입니다. 컴포넌트 역할하는 js 파일은 components 폴더에 묶고 페이지 역할하는 js파일은 routes아니면 pages폴더에 묶고 자주쓰는 함수가 들어 있는 js 파일은 utils폴더에 묶으면 됩니다. 즉 알아서 필요할 때마다 폴더를 만들면됩니다. 우선 상단에 아래와 같이 import 합니다. import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom' useNavigate() 페이지 이동은 Link 써도 된다고 했는데 그게 별로이면 use..
페이지를 나누고 싶으면 기존의 html css js 에서는 html 파일 여러개를 만들었습니다. 근데 리액트에서는 html 파일을 하나만 사용합니다. 누가 다른 페이지 요청하면 내부에 있는 를 갈아치워서 보여주면 됩니다. 이러한 코드를 직접 짜면 되는데 react-router-dom 이라는 외부 라이브러리 설치해서 구현하는게 보통 일반적입니다. 설치방법 터밀널을 열어서 npm install react-router-dom@6 입력해서 설치합니다. 셋팅은 index.js 파일로 가서 이걸로 이걸 감싸면 끝입니다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('ro..
이번에는 아래의 화면의 상품항목에서 상품데이터를 html에 보여주도록 해보겠습니다. 아래의 자료를 state에 보관해놓고 html에 데이터바인딩해보도록 합시다. 실제 서비스였으면 서버에서 받아왔겠지만 서버가 없으니 서버에서 보낸것이라고 가정하겠습니다. 데이터를 보면 [arry자료]에 상품정보 3개가 들어 있습니다. 근데 상품정보가 길고 복잡해서 {object자료}에 넣어뒀습니다. 축약해보면 [ {}, {}, {} ] 이렇게 생겼습니다. [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 11..
