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..
현재 페이지는 이렇습니다. 위의 nav는 react bootstrap에서 가져왔습니다. 이제 nav아래에 페이지의 대문을 장식하는 이미지를 넣어보겠습니다. img 넣는법 css에서 img넣기 App.js에 를 작성해주고 css에서 다음과 같이 작성합니다. .main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : center; } css파일에서 src폴더안에 있는 사진을 사용하고 싶으면 ./이미지경로 사용하면 됩니다. html에서 img넣기 html안에서 src폴더의 이미지를 넣고 싶으면 이미지를 import 해오고 사용해야 합니다. import bg from './b..
이번에는 저번시간에이어 input에 사용자가 값을 입력하면 해당 값으로 새로운글의 제목으로 작성하고 화면에 표시하고 글마다 삭제버튼을 만들어 삭제버튼을 누르면 해당글이 삭제되는 기능을 구현해보겠습니다. 1. 유저가 입력한 데이터 추가 사용자가 아래의 입력칸에 값을 입력하고 글발행을 누르면 그 값이 새로운글의 제목이되어 목록에 추가되는 코드를 구현해야합니다. 예전 자바스크립트 코드로 따지면 "버튼 누르면 유저가 입력한 글 가져와서 html을 하나 생성해주세요" 였지만 리액트에서는 "버튼 누르면 유저가 입력한 글 가져와서 글제목 state에 넣어주세요" 이렇게 작성하면됩니다.(state를 변경하면 글제목.map()함수에 의해 알아서 html을 재랜더링해주기 때문에) 아래의 state에 유저가 입력한 값만 끼..