본문 바로가기

HMWK122

[React] Tab 만들고 애니메이션 추가하기 💡 실습 포인트! 💜 Tab 만들기 전에 생각해보기 function Detail(){ return ( 상세정보 리뷰 Q&A 상세정보 내용입니다. 리뷰 내용입니다. Q&A 내용입니다. ) } 3개의 탭으로 구성한다고 가정했을 때, 클릭할 버튼 태그 3개와 버튼을 클릭했을 때 보여줄 내용이 들어갈 div 태그가 3개 있는 UI 라고 생각할 수 있다. 이제 거기서 각 버튼을 누르면 해당 버튼에 맞는 div 태그를 보여주면 된다. 따라서, 몇 번째 버튼을 눌렀는지 state 로 저장해두고, state 에 따라 알맞은 div 박스를 보이도록 혹은 보이지 않도록 처리해주면 된다. 💜 Tab UI 디자인하기 빠른 디자인을 위해서 React Bootstrap 에서 Tabs 를 검색해서 마음에 드는 디자인을 복사하여 D.. 2022. 3. 27.
[React] props 대신 Context API 사용해보기 💡 실습 포인트! 💜 props 대신에 사용할 수 있는 방법 찾아보기 Component 가 여러 개 중첩되어 있으면 props 를 복잡하게 연속으로 사용해야 한다. 만약 이렇게 props 를 연속으로 사용하는 것이 싫다면 Redux 를 사용하든지 Context 문법을 사용하면 된다. 그러면 props 를 전송하지 않고도 하위 Component 들끼리 state 값들을 똑같이 공유하는 것이 가능하다. 다만 중첩된 Component 가 몇 개 없다면 props 를 사용하는 것이 가장 간단하고 편리하다. 💜 Context 문법으로 props 없이 state 공유하기 Context 문법은 모든 하위 Component 들이 props 없이도 state 를 사용할 수 있도록 만들어주는 문법이다. 🤍 Context .. 2022. 3. 27.
[React] 상세 페이지에 재고 데이터 표시하기 💡 실습 포인트! 오늘은 상세 페이지에 재고 데이터를 표시해보았다. 뿐만 아니라 재고 데이터는 주문 및 주문취소의 수에 따라 개수가 유동적으로 변하므로, 이와 유사하게 "주문하기" 버튼을 눌렀을 때 재고 데이터가 감소하도록 구현해보았다. 💜 상세 페이지에 재고 데이터 표시하기 상세 페이지의 "주문하기", "뒤로가기" 버튼 위에 재고 데이터를 표시하기로 했다. 🤍 재고 데이터를 저장할 state 만들기 let [leftAll, setLeftAll] = useState([10, 11, 12]); DB 를 이용해서 구현하는 게 아니기 때문에 최상위 파일인 App.js 파일에 임의로 0번 상품, 1번 상품, 2번 상품의 재고 데이터 array 를 leftAll 이라는 state 에 저장해주었다. 🤍 만들어놓은 .. 2022. 3. 26.
[React] React 에서 Ajax 요청하기_2 💡 실습 포인트! 강사님이 이런 기능을 추가해보는 건 어떨까요? 라고 할 때마다 하나씩 기능을 추가해보았다. 배운 내용을 토대로 혼자서 기능을 모두 오류없이 만들어 추가해서 매우 뿌듯했다. (사진이 제대로 안 나오는 부분은 강사님이 제공해준 데이터라서 어쩔 수 없었다...저거도 직접 구글링하며 만들기엔 공부하고 있는 현재 새벽 5시...) 지금 보니 "로딩에 실패했습니다." 라는 문구보다 "더이상 상품이 없습니다." 로 작성할 걸 그랬다. 수정해둬야지.. 💜 "상품 더보기" 버튼 누를 때마다 다른 경로에서 데이터 받아와서 상품 레이아웃에 추가하기 이 기능은 만들기 전에 강사님이 count 기능을 넣어주면 된다며 약간의 힌트를 주셨다. 강사님이 제공한 데이터 경로는 json 파일명이 1, 2, 3 과 같이.. 2022. 3. 26.
[React] React 에서 Ajax 요청하기 💡 실습 포인트! 이번에는 GET 요청을 통해 받아온 데이터를 가지고 "상품 더보기" 버튼을 눌렀을 때 상품 레이아웃에 해당 데이터들이 추가되도록 만들어보았다. 💜 Ajax 알아보기 Ajax 는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 일종의 JavaScript 코드이다. 서버란 누군가가 특정 URL 로 요청을 하면 데이터를 가져다주는 프로그램 정도로 이해하면 편하다. 요청이란 서버에 GET, POST 등과 같이 요청하는 방법을 의미하는데 사실 웹탐색, 로그인, 검색 등을 GET, POST 요청을 통해 진행한다. GET : 데이터, 웹페이지 같은 것을 읽고 싶을 때 서버에 보내는 요청을 의미하며, 대표적인 GET 요청으로는 브라우저 주소창에 URL 을 입력하는 행위 등이 있다. POST : 데이.. 2022. 3. 26.
[React] useEffect 과제 풀기 💡 실습 포인트! 이번에는 useEffect() 와 setTimeout() 을 사용하여 2초동안만 보여지는 알림창을 만들어보았다. 이전에 부트캠프를 수강할 때에는 useEffect 니 Hook 이니 많이 들어는 봤는데 제대로 된 설명이 없어서, 이해도 하지 못한 상태에서 다음 진도로 넘어가느라 찝찝했었는데 이번 기회를 통해 개념을 알고 확실하게 어떤 때에 사용해야 하는지를 알게 되었다. 💜 알림창 타이머 기능 만들기 // 전체 코드 미리보기 // 전체 코드 내용이 길어서 불필요한 부분은 제외했다. function Detail(props) { let [alert, setAlert] = useState(true); useEffect(()=>{ let timer = setTimeout(()=>{setAlert.. 2022. 3. 26.
[React] useEffect 사용해보기 💡 실습 포인트! 💜 warnig 해결하기 🤍 cannot appear as a descendant of 지난 번 Router 수업이 지난 후부터 위와 같이 "a 태그 안에 a 태그를 넣으면 안됩니다." 라는 내용의 warning 이 뜨기 시작했다. Home 알고보니 Bootstrap 을 복사-붙여넣기 했던 부분인 태그 안에 태그를 넣은 게 문제였다. 이 두 개의 태그는 모두 태그와 마찬가지로 링크 기능이 있는 태그여서 위와 같은 warning 이 떴던 것이다. Home 그래서 위와 같이 코드를 수정해주었다. as 라는 속성은 React Bootstrap 문법인데 그냥 기본 태그 대신 사용할 html 태그 혹은 Component 를 집어넣을 수 있다. 따라서 태그를 넣어주었다. 이제 개발자 도구로 확인했.. 2022. 3. 25.
[React] CSS 대신 SASS 사용해보기 💡 실습 포인트! 💜 node-sass 설치하기 CSS 가 너무 길어지는 경우 SASS 라는 preprocessor 를 이용하면 조금 더 쉽고 짧게 프로그래밍 언어처럼 CSS 를 작성하는 것이 가능하다. 쉽게 말해 SASS 를 이용하면 변수, 반복문, 함수 등과 같은 문법으로 CSS 작성이 가능해진다는 것이다. SASS 로 작성한 뒤에 CSS 로 컴파일만 해주면 되는데, 이 부분은 node-sass 라는 라이브러리만 설치해주면 해결된다. 🤍 node-sass 설치하기 // npm 을 이용하는 경우 npm install node-sass // yarn 을 이용하는 경우 yarn add node-sass 터미널에 위 코드 중 하나를 입력해주면 node-sass 가 설치된다. 📌 node-sass 설치 시 브.. 2022. 3. 25.
[React] styled-components 로 CSS 스타일링하기 💡 실습 포인트! 💜 styled-components 설치하기 Component 가 많아지면 스타일링을 하는데 아래와 같이 다소 불편함이 생기기도 한다. class 를 만들어 놓은 것을 까먹고 중복해서 만드는 경우가 생긴다. 갑자기 다른 이상한 Component 에 원하지 않는 스타일이 적용된다. CSS 파일이 너무 길어져서 수정이 어렵다. 그래서 styled-components 라는 라이브러리를 이용하면 Component 를 제작할 때 스타일을 바로 입혀서 Component 를 만들어버리는 게 가능해지므로 이러한 불편함을 줄일 수가 있다. 🤍 styled-components 설치하기 // npm 을 이용하는 경우 npm install styled-components // yarn 이 설치된 경우 yar.. 2022. 3. 25.
[React] React Router 3 : URL 파라미터로 상세 페이지 100개 만들기 💡 실습 포인트! 오늘은 URL 파라미터를 이용해서 데이터바인딩이 된 상세 페이지가 나올 수 있게 만들어보았다. 💜 Detail Component 에 데이터바인딩하기 // 전체 코드 미리보기 // 전체 코드가 길어서 불필요한 부분은 제외했다. import Main from './Main' import Detail from './Detail'; function App() { let [shoes, setShoes] = useState(Data); return ( {/* Main */} {/* Detail */} // 수정 ); } Detail Component 에 데이터바인딩을 해주려면 부모 Component 인 App Component 에서 Detail Component 로 shoes 라는 state 를 .. 2022. 3. 24.
[React] React Router 2 : Link, Switch, history 기능 알아보기 💡 실습 포인트! 💜 상세페이지를 담을 Detail Component 만들기 import React from "react"; function Detail() { return ( White and Black Born in France 120000 주문하기 뒤로가기 ) } export default Detail; 지난 시간에는 태그 안에 html 내용 전체를 넣어주었다. 그러나 이번에는 Main Component 처럼 따로 Detail.js 파일을 만든 후 Detail 이라는 이름의 Component 를 생성해서 export 해주었다. // 전체 코드 미리보기 // 전체 코드가 길어서 불필요한 부분은 제외했다. import Main from './Main' import Detail from './Detail.. 2022. 3. 24.
[React] React Router : 셋팅 후 기본 라우팅해보기 💡 실습 포인트! 💜 메인 페이지( 경로 : / ) 💜 상세 페이지 ( 경로 : /detail ) 💜 React Router 셋팅 후 기본 라우팅해보기 여러가지 페이지를 만들고 싶을 때에는 Router 를 이용하면 되는데, 이는 react-router-dom 이라는 공식 라이브러리를 설치를 통해 이용이 가능하다. 🤍 React Router 설치 및 셋팅 // npm 이용하는 방법 npm install react-router-dom@5.2.0 // yarn 이용하는 방법 yarn add react-router-dom@5.2.0 터미널에 위 두 코드 중 하나를 입력해서 설치하면 된다. yarn 으로 시작하는 코드를 사용하기 위해서는 미리 yarn 이 설치되어 있어야 한다. import React from '.. 2022. 3. 24.

티스토리툴바