react (7) 썸네일형 리스트형 React - [깊은 복사 얕은 복사, 상태변수와 반환형 함수] 투레벨 프로젝트를 진행하고 있다. 그런데 문제가 생겨서 아무리 생각해도 이유를 찾지 못해서 다른 문제들 부터 해결하고 다시 도전해봤다. 문제 const removeToCart = (title) => { if (cart.length === 1) { setCart([]); window.localStorage.removeItem('cart'); return } setCart(cart.filter(product => product.title !== title)); console.log(cart); window.localStorage.setItem('cart', JSON.stringify(cart)); } 페이지를 만들고 있는데 오른쪽의 장바구니 페이지에서 상품 remove 버튼을 누르면 AddToCart컴포넌트.. React - Material-Ui [makeStyles Hook] makeStyles Hook - 사용자 정의 스타일을 적용할 수 있도록 makeStyles 를 사용하면 css속성을 정의한 객체를 값으로 갖는다. - css로 html 태그에 className을 먹이는 것과 비슷하다. 커스텀 스타일을 적용하려면 makeStyles hook으로 작성한 함수를 호출한 결과를 classes변수에 저장한다. 그리고 커스텀 스타일이 필요한 곳에 className prop의 값으로 classes 변수에 저장된 클래스 이름을 넘긴다. import {makeStyles} from "@material-ui/core/styles"; import {Box} from "@material-ui/core"; const useStyles = makeStyles({ home:{ backgroundC.. React - 6 State [setState(), life cycle method] function component - 쉽게 말해 함수형태의 컴포넌트이다. function APP(){ } 이렇게 정의된 컴포넌트들은 전부 함수형 컴포넌트이다. return 형태로서 반환하고 스크린에 모양을 넘길수 있다. Class component - 클래스 형태의 컴포넌트이다. - return 형태가 없어도 된다. class App extends React.Component{ render(){ return I am a class component } } 이러한 형태로서 React.Component을 상속받는다. React.component는 render()함수를 갖고 있기 때문에 APP class도 render 함수를 사용할 수 있다. 그리고 render함수가 class안에 있다면 react는 자동적으.. React - 5 [웹사이트에 동적 데이터 추가하기] 동적데이터 - 변화하는 데이터를 넣음으로서 웹페이지가 항상 같은 내용이 아닌 변화되는 데이터에 따라 달라지는 동적 변화가 일어나는 웹사이트를 만들수 있다. 웹사이트에 동적 데이터 추가하기 const onepiece = [ { name : "루피", image : "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.aladin.co.kr%2Fshop%2Fwproduct.aspx%3FItemId%3D218911203&psig=AOvVaw0g6yWi-7xweZ40-2DwCq0R&ust=1605342401333000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKjh786M_-wCFQAAAAAdAAAAABAD" }, { name : "상디".. React - 4 [component 사용 , JSX] component - 기본적으로 component는 HTML을 반환하는 함수이다. - 아래 경우에서 "" 와 같은 형태를 component라고 한다. - component는 javascript로 HTML 형태를 반환한다. (JSX : javascript와 HTML의 조합) - React는 모든 부분이 component라고 생각하면 된다. JSX - html in javascript - React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, and better identify whether bugs in yo.. React - 3 [React 구동원리] 기초 리액트 설명 강의 중에 간단히하기 위해서 이렇게 css파일들을 없애고 APP.js 와 index.js 파일의 코드 내용을 간소화 시켰습니다. 현재 동작중이지만 아무것도 안보입니다. App.js 코드를 위와 같이 바꾸면 웹을 재실행 하지 않아도 알아서 refresh해주며 값이 바뀝니다. 해당하는 div의 위치를 살펴보면 body안에 div id = "root" 인 박스안에 div가 들어있음을 알수 있다. 하지만 index.html을 들어가보면 그런 코드는 존재하지 않는다. 즉, react는 빈 웹페이지에서 돌아가는 즉시 필요한 모든 요소들을 구성해낸다. JS로 그러한 요소들을 만들고 html에 요소들을 밀어넣는다. react는 div id="root"라는 박스안에 모든것을 밀어넣는다. 보다 시피 Re.. React - 1 개발환경구성 [VScode, node js, npm, yarn, npx] React - JS 기반으로 돌아가는 라이브러리이다. 즉, js로 돌아가는 라이브러리 모음인 것이다. - 주로 사용자 인터페이스를 만드는 프론트 분야에서 쓰인다. - 사용자는 약 66퍼센트로서 매우 많은 서비스가 React로 만들어졌다. - React를 사용하면 js실력이 는다. React 개발환경 설정하기 React를 사용하기 전에 깔아야 하는 것들 있다. - node js window기반에서는 리눅스언어로 까는 게 편하기 때문에 git bash를 깔아서 설치하길 바란다. Node JS - 일종의 JS 런타임 구동 환경이다. 구글 Chrome V8버전 JS엔진을 사용하여 만들어졌으며 JS구동 플렛폼이라고 정의한다. JS로 돌아가는 구동 플렛폼이다. From. Wiki Node.js는 확장성 있는 네트워.. 이전 1 다음
