일단 해보자

언제 사용할까? react 는 상위 컴포넌트에서 하위 컴포넌트로 prop을 전달해서 데이터를 전달한다. 예를들어) 최상위 컴포넌트에서 3단계 아래의 컴포넌트에 데이터를 전달하려면? =>1,2단계 에 있는 컴포넌트는 해당 데이터가 필요없더라도 이를 받아서 3단계 컴포넌트까지 밑으로 전달해야한다. 이때, context를 사용하면 최상위에서 바로 3단계 아래로 전달해줄 수 있다. 즉, 전역적으로 사용해야하는 데이터를 전달할 때 사용하면 좋다. 예시) 페이지에서 dark mode 버튼을 클릭할 경우 Dark 모드를 적용하는 동작하도록 구현. 우선 Context를 사용하지 않고 구현한 후, Context를 사용하여 구현한 코드와 비교하려고 한다. Component 구조 - Context 적용 전 Code App ..

사용법 초기화 : const ref = useRef(value); 데이터가 저장되는 형태는 Object 다 => {current : value } 값 변경 : ref.current = newValue // {current : newValue} 언제 쓸까? 1. 변화는 감지해야 하지만 그 변화가 랜더링을 발생시키지 않도록 할 경우 useRef를 사용한다. 2. useRef를 사용해서 DOM 속성에 접근할 수 있다. ( ex. input 태그에 focus하도록 ) state와 ref 차이점 state를 변경할 경우 렌더링이 일어나지만, ref를 변경할 경우 Component 가 렌더링이 일어나지 않는다. import React from "react"; import { useState } from "react..

문제) 이미지가 너무 느리게 로드 된다. 앞서서 이미지가 너무 느리게 로드되는 문제를 해결하고자 AWS S3를 사용했었다. 하지만, 프리티어 사용 이후에 요금이 나올 수도 있다고 생각해서 다른 해결책을 고민해보기로 했다. React) AWS S3 사용, netlify 배포 후 이미지가 느리게 load되는 문제 문제점 - 사진을 로드 하는데 너무 많은 시간이 걸린다. 원인 - 프로젝트 내의 image 폴더를 만들어서 이미지를 저장했더니 로드가 오래 걸린다. 해결방법 AWS S3에 이미지를 저장해두고, 사진을 불 time-to-study.tistory.com 해결 방법) 이미지 preload를 사용해보려고 한다. preload는 웹 페이지에 필요한 이미지 파일을 사전에 미리 로드하고, 사용자가 이미지가 필요..

문제) Component 간의 화면 전환을 원하지 않아서, 뒤로가기를 막고싶다. 원하는 동작 현재 동작 2번 질문에서 뒤로가기 => 1번 질문 2번 질문에서 뒤로가기 => 시작화면 현재 동작) 뒤로가기 이동 원리) 'history State' 에 현재까지 이동해온 페이지 정보가 Stack으로 담겨있다. 그때, 뒤로가기가 발생하면 stack에 가장 위의 있는 페이지로 이동하게 된다. 문제 해결 방법) 1. 뒤로가기를 막는다. history.pushState(null,"",window.location.href); 사용 위의 코드를 통해서 지금까지 이동해온 페이지가 담긴 history에 현재 페이지를 최상위에 넣어두고 뒤로가기 발생 시 history 중 다시 한 번 현재페이지가 나오도록 한다. => 현재 페이..

언제 사용하나? => useEffect 에서 원하는 동작을 return 하면 Component가 Unmount(화면에서 사라질)될 때 or 다음 렌더링 될 때 실행된다. 사용예시) 기능) - timer 버튼을 누르면 1초에 1번씩 console에 출력한다. - 다시 timer 버튼을 누르면 출력을 멈춘다. Code) 1) Clock Component => Timer Component가 showTimer 값에 따라 mount(showTimer =true) , unmount (showTimer =false) import React, { useState } from "react"; import Timer from "./Timer"; function Clock(){ const [showTimer,setShowT..

문제점 - 사진을 로드 하는데 너무 많은 시간이 걸린다. 원인 - 프로젝트 내의 image 폴더를 만들어서 이미지를 저장했더니 로드가 오래 걸린다. 해결방법 AWS S3에 이미지를 저장해두고, 사진을 불러오는 방식을 사용해보자. 1. AWS S3 버킷 만들기 객체 소유권 => ACL 활성화 , 퍼블릭 액세스 차단 => 해제 왜?? 퍼블릭으로 접근할 수 있도록 해서 프로젝트에서 데이터를 불러오려고 2. 폴더 만들기 + 이미지 업로드 후 파일 퍼블릭 설정 3. image 를 가져오는 URL 변경 기존 Code : img src = "/image/사진이름.png" (로컬 Path) 변경 Code : img src = ( s3에 올린 사진 ) 객체 URL 결과 최대 10배 이상 시간을 단축했다. ** S3 프리..

언제 사용하나? mount (화면 첫 렌더링) Update (다시 렌더링) Unmount (화면에서 사라질 때) 위의 상황에서 => 특정 작업을 실행해주고 싶을 때 필요에 따라서 사용법 - ( 2가지 ) 1. component가 렌더링 될 때마다 useEffect 실행하고 싶을 때 사용법) useEffect() 의 첫 번째 인자만 함수를 준다. ( useEffect( ()=>{} ) ) import { useEffect } from "react"; function Component(){ useEffect(()=>{ //실행할 작업 }) }; 2. useEffect를 필요한 상황에만 실행하고 싶은 경우 사용법) useEffect의 첫 번째 인자로 함수 + 두 번째 인자로 배열을 준다. ( useEffect..

사용 전 function Users(){ const name = "초기값"; return( {name}님 환영합니다. ) } export default Users 어떤 경우 사용하지? 동적으로 값을 변경해야 할 때 예를들어, 사용자가 이름을 입력을 하자마자 name 변수가 변경되고 => 새로고침 없이 화면에 출력하고 싶다. 사용법 const [name, setName] = useState('초기값'); //name은 값을 저장하는 변수, setName은 값을 변경하는 함수 setName 으로 값을 변경할 경우 => 실시간으로 변경된 데이터가 화면에 바로 보여진다. 왜? 함수형 컴포넌트가 재렌더링 되니까!! 즉, state의 값이 변경되면 Component 는 다시 렌더링 된다. 주의) 아래와 같이 코드를..