분류 전체보기 (112) 썸네일형 리스트형 CSS : Styled-Components 활용법 + typescript 기존 css의 경우 scss와 같은 전처리기가 있었음에도 동적으로 사용하기에는 불편함이 있었습니다. 인라인 스타일을 사용하거나, 클래스명을 이용해야 했습니다. 인라인 스타일의 경우 적용 순위가 높아지고, 클래스명의 경우 작명과 같은 불편함이 있었습니다. 이러한 점을 CSS in JS를 통해 해결할 수 있었습니다. CSS in JS는 css의 변수와 함수를 js파일 안에서 사용할 수 있게 합니다. Styled-Components는 현재 가장 많이 쓰이고 있는 CSS in JS 중 하나입니다. 1. 설치 와 실행 $ npm install styled-components import React from 'react'; import styled from 'styled-components'; 기존 css의 경우 .. React : useRef. 값이 변경되어도 렌더링 되지 않는 변수 만들기. 1) 다시 렌더링이 되어도 동일한 참조값 유지. React 컴포넌트는 State가 변할 때마다 다시 렌더링이 되고 내부의 변수들이 초기화 됩니다. 이것을 원하지 않을 때 useRef 를 사용할 수 있습니다. Ref 안의 값이 변경 되어도 컴포넌트는 다시 렌더링 되지 않습니다. 불필요한 렌더링이라면 State대신 Ref를 사용해서 막을 수 있습니다. mport React, { useState, useEffect } from "react"; function ManualCounter() { const [count, setCount] = useState(0); let intervalId; const startCounter = () => { // 💥 매번 새로운 값 할당 intervalId = setInterva.. 프로젝트 리뷰 리체크 1. sass : focus 시에 &focus 연산자 활용. 2. 굳이 버튼을 만들지 않아도 되는 함수들. 즉 다이렉트로 조건으로 쓸 수 있는 것들 확인해서 중간단계 없애기. ex) 변수의 조건이 참이라면 버튼을 true로 만들어라. 버튼이 true라면 효과를 적용해라 (x) -> 변수의 조건이 참이라면 효과를 적용해라(o) 시작값에 자동으로 적용되는 문제가 있다. 조건부렌더링으로 해결. ( length > 0 && condition ? ~ : ~) 3. CSS property 순서 Layout Properties (position, float, clear, display) Box Model Properties (width, height, margin, padding) Visual Properties (.. React : Path Parameter / Query Parameter 를 이용한 동적 라우팅 & 페이지네이션 (Pagination) 이전에 라우터를 통해서 경로에 따라 각기 다른 화면을 보여주는 방법에 대해서 배웠었습니다. 하지만 화면 하나를 구현하기 위해서 일일이 라우터의 패스를 지정해 주어야 한다면 무수히 많은 라우터가 생성되어야 합니다. 이 때 사용할 수 있는 것이 Path Parameter를 이용한 동적라우팅 입니다. Path Parameter localhost:3000/product/2 localhost:3000/product/45 localhost:3000/product/125 라우트 경로 끝에 각기 다른 id 값들이 들어갑니다. 2, 45, 125. url 경로에서 달라지는 부분을 저장하는 매개 변수를 Path Parameter 라고 합니다. Path Parameter 는 Router 컴포넌트에서 다음과 같이 정의됩니다... React : Mock data 가져오기 / 조건부 렌더링 Mock Data 란? 실제 백엔드 API에서 받아온 데이터가 아닌, 프론트엔드 개발자가 필요에 의해 임의로 만든 샘플 데이터입니다. mock data를 만드는 과정에서 백엔드 API에서 보내주는 response가 어떤 형태인지, key-value값을 확인하고 미리 mock data와 백엔드 response의 형태를 맞춰보면서 추후 실제 API를 수월하게 연결 할 수 있습니다. - mock 데이터의 확장자는 .json입니다. json파일 안에서는 아래와 같이 스트링화 시켜서 작성해야 합니다. - Mock data는 선언이 아닌, 데이터일 뿐입니다. 그 안에서는 자바스크립트 문법을 쓸 수 없습니다. 순수 데이터 그 자체를 나타낸다고 생각하며 됩니다. Mock data 예시. [ { "id": 1, "us.. React : Ajax : Axios / fetch 의 차이 , 서버 통신 과정. 서버로 데이터 요청하는 방법은 여러가지가 있습니다. 가장 흔한 방법은 브라우저 주소창에 url을 넣는 것이고, ajax를 통해서 자바스크립트 코드로 요청을 하는 방법이 있습니다. AJAX 란? AJAX는 Asynchronous JavaScript and XML의 약자로, JavaScript와 XML을 이용해서 비동기적으로 서버와 통신하는 기법. 요즘엔 XML 보다는 대부분 JSON을 사용합니다. 용어와 실제 기술간의 차이가 커져서 약어가 아닌 고유명사로 취급하고 있습니다. Url로 get 요청시 새로 페이지를 받아오기 때문에 새로고침이 진행되지만, 자바스크립트 ajax는 새로고침 없이 서버와 데이터 주고받을 수 있다는 장점이 있습니다. ajax 안에는 세가지 방법이 있습니다. XMLHttpRequest .. React : Lifecycle & useEffect 1. useEffect 란? React 컴포넌트에게는 생명주기가 있다. 1. 생성이 될 수도 있고 (Mount) 2. 재렌더링이 될 수도 있고 (Update) 3. 삭제가 될 수도 있다. (Unmount) 리액트에서는 이 타이밍에 맞춰 특정한 이벤트들을 발생시킬 수 있다. "이 컴포넌트 등장 전에 이것좀 해줘" "이 컴포넌트 사라지기 전에 이것좀 해줘" "이 컴포넌트 업데이트 되고 나서 이것 좀 해줘" 갈고리를 달아서 코드를 넣어주면 된다. -> Lifecycle hook import {useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return.. React : Router: useParams, url 파라미터를 이용한 <특정 상품 - 특정 페이지 매칭>. 동적라우팅 url 파라미터를 이용한 특정 상품 - 특정 페이지 매칭하기. 동적 라우팅! + 파라미터가 아닌 현재 페이지의 Pathname을 가져오려면 useLocation()을 사용해야 한다. 라우터 path 속성 값 안에 있는 :id 값을 url 파라미터라고 한다. 현재 3개의 라우터 패스를 통해 어바웃 페이지 3개를 만들었다. 세 페이지의 url 파라미터는 각각 0 / 1 / 2 이고, 동일한 About 컴포넌트 페이지가 보여지고 있다. 이것을 위의 코드처럼 변수명으로 작성하게 된다면 동적라우팅이 가능하게 된다. 위에서 라우터를 통해 만들어둔 현재의 About 컴포넌트 페이지는 아래와 같다. 모두 같은 값(shoes[0])이 들어있다. parameter값을 통해서 다른 path로 들어가도 같은 About페이지가.. 이전 1 ··· 7 8 9 10 11 12 13 14 다음 목록 더보기
