React 썸네일형 리스트형 [React] Component화 활용하기 무분별하게 component를 쪼개면 나중에 데이터를 받아왔을 때 데이터를 활용하기 까다롭다 예를 들어 최상위 컴포넌트에서 데이터를 받아왔다고 하자 사이즈 컴포넌트가 있고 색상 컴포넌트도 있고 이렇게 있다고 한다면 보통 color에 관한 컴포넌트를 하나 만들고 size에 관한 컴포넌트를 하나 만든다 하지만 데이터를 같이 공유하고 있고 그 데이터를 나중에 백엔드 쪽으로 넘겨줘야 한다면 이 두 개의 컴포넌트는 자식 컴포넌트가 되어 최상위 컴포넌트에 있는 데이터를 자식 컴포넌트에 내려줘야 하기에 이 과정에서 데이터를 주고받는 게 복잡해질 수 있기 때문에 하나의 컴포넌트로 활용하는 게 좋은 방법 일 수 있다 더보기 [Team Project] 크록스(Crocs) 1 기간 : 6월 20일 ~ 7월 1일 팀원: 프런트엔드 3명, 백엔드 1명 담당 페이지 : 상품 상세 페이지 HTML, CSS, Javascript 라이브러리 : React 중간 점검 제작 중 이번 주 5일 동안의 주요 기능 - 공식 홈페이지를 참고한 클론 레이아웃 - MockData를 이용하여 데이터 활용 - 캐러셀(슬라이드) UI 기능 구현 1. 공식 홈페이지를 참고한 클론 레이아웃 크록스 공식 홈페이지를 참고하여 레이아웃을 구성하고 HTML과 CSS를 적용시켜 보았다 처음부터 미디어 쿼리를 이용한 반응형을 제일 후위 순위로 놓았기 때문에 px단위를 사용하여 웹 pc 뷰에서는 UI가 늘어나거나 줄어 나지 않게 하였으며 이후 반응형 페이지 작업을 진행할 시 미디어 쿼리를 이용해서 단계별로 UI를 수정하는.. 더보기 [React] react 구조분해 할당? 연습도 할 겸 react 파일 하나 만들고 시작한다 card형식의 컴포넌트 하나 만들어서 더미 데이터 하나 뚝딱 만들고 내가 했던 대로 한다면 이렇게 function App() { let [movie, setMovie] = useState(cardData) return ( { movie.map((elm, index) => { return ( {movie[index].movieTitle} {movie[index].movieRanking} ) }) } ); } cardData.js let cardData = [ { movieId: 1, movieImage: 1, movieTitle: "버즈 라이트이어", movieRanking: "Top 1" }, { movieId: 2, movieImage: 2, movi.. 더보기 [React] map()을 통한 반복적인 태그 줄이기 리액트를 접하기 시작하면 반복적으로 하드 코딩되는 부분이 발생한다 예를 들어 function App() { return ( Safari belted half shirt 6월17일 예약 발송 Flap pocket open collar shirt 6월17일 예약 발송 Aircrew half shirt 6월17일 예약 발송 Multi stripe pique tee 6월17일 예약 발송 ); } 이렇게 상품이 여러개가 존재하고 상품 한 개마다 비슷한 구조의 태그들을 가지고 있다면 State를 통해 배열안에 담거나 data로 만들어 코드를 줄이면서 효율적으로 관리할 수 있다 const [productData, setProductData] = useState([ 'Safari belted half shirt', '.. 더보기 [React] useEffect ?? useEffect란 어떠한 컴포넌트가 Mount(화면에 첫 렌더링, 시작)되었을 때 Update(재렌더링, 다시)되었을 때 Unmount(화면에서 끝날 때, 종료) 되었을 때 특정 작업을 처리해주고 싶으면 사용하면 된다 이 실습은 유튜트 별코딩님 영상을 예제로 활용한다 useEffect()는 콜백 함수를 받는다 첫 번째 방법 useEffect(() => { // 실행하고 싶은 코드 }); - 렌더링 될 때마다 실행 두 번째 방법(인자) useEffect(() => { // 실행하고 싶은 코드 }, [value]); - 화면에 첫 렌더링 될 때 실행 - value값이 바뀔 때 실행 실습을 통해 확인해본다 App.js에 버튼을 누르면 카운트수가 증가하는 코드를 작성했다 import './App.css'; i.. 더보기 [React] React State? State는 리액트에서 상태 값이다 유동적인 데이터를 주고받을 수 있는 상태 값을 말한다 class형 State가 있고 function형 State가 있다 function형 State인 useState()를 예제를 통해 알아본다 React CRA를 Load 한 App.js import './App.css'; import { useState } from 'react'; function App() { // useState(); const [state, setState] = useState(); return ( hello, react ); } export default App; function형에서 State는 useState()를 사용한다 1. useState() 사용하려면 먼저 import 해와야 한다 2.. 더보기 [React / javascript] React 시작하기 React 시작하기 전 필수로 설치해야 할 요소들이 있습니다. 아니면 React를 무겁게 배우기는 싫다 그냥 가볍게 React가 어떤 건지 알고만 싶다 하시면 CodePen Create a New Pen ... codepen.io Stackblitz React (forked) - StackBlitz stackblitz.com 사용하여 간단하게 react 사용환경을 경험하실 수 있습니다 저는 VScode를 기준으로 설명해 드리겠습니다 주의) Node.js의 최신버전이 설치되어 있어야 합니다! 각 운영체제의 맞는 터미널 환경을 확인해 주세요! 저는 바탕화면에 React-playground라는 폴더를 새로 생성하여 불러왔습니다 순수하게 html, css, js로만 작성할때는 파일을 바로 만들면 간단하게 사용할.. 더보기 이전 1 2 다음
