![]()
useState를 사용해야 하는 이유지역 변수는 렌더링 간에 유지되지 않는다 => 재렌더링 시 지역변수는 초기화된다. 리액트는 지역 변수를 변경되어도 렌더링을 일으키지 않는다. => 지역변수가 변경되어도 컴포넌트를 다시 렌더링해야 한다는 것을 인식하지 못한다.따라서 컴포넌트를 새로운 데이터로 업데이트하기 위해선 다음 두 가지가 필요합니다. 1. 렌더링 사이에 데이터를 유지해야 한다. 2. 리액트가 데이터 변화를 감지하고 컴포넌트를 다시 렌더링하도록 유발한다. 위 두 가지를 useState 훅이 제공하기 때문에 리액트에서는 let대신 useState를 사용해야 한다. 사용방법const [index, setIndex] = useState(0);
![]()
이벤트 핸들러에 함수 전달&호출하기// 함수를 전달하기 (올바른 예시) // 함수를 호출하기 (잘못된 예시)올바른 예시에서는 handleClick 함수가 onClick 이벤트 핸들러에 전달된다면 리액트는 해당 함수를 사용자가 버튼을 클릭했을 때만 호출합니다.그러나 잘못된 예시에서는 handleClick 함수가 onClick 이벤트 핸들러에서 호출된다면 리액트는 해당 함수를 사용자가 버튼을 클릭하지 않아도 렌더링 과정에서 호출합니다.이는 리액트가 렌더링 과정에서 JSX 와 { } 내의 자바스크립트가 즉시 실행되도록 구현되어 있기 때문입니다.매개변수가 필요한 함수를 이벤트 핸들러에 전달하고 싶다면?그렇다면 매개변수가 필요한 함수를 이벤트 핸들러에 전달하고 싶으면 어떻게 코드를 작성해야할까요?이는 익명함..
https://bluepebble25.tistory.com/31
![]()
// eslint-disable-next-line react-hooks/exhaustive-deps 추가 // 예시 useEffect(() => { calcSumApplication(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [allApplication]);
![]()
props로 함수 전달하기(매개변수x) //부모 컴포넌트 import React from "react"; import Child from "./Child"; const Parent = () => { // props로 전달할 함수 const testFunc = () => { console.log("addArticle 함수 호출"); }; return ; }; export default Parent; // 자식 컴포넌트 import React from "react"; const Child = ({ propsFunc }) => { return ( // 버튼 클릭 시 부모 컴포넌트의 testFunc 함수 호출 Add Article ); }; export default Child; props로 함수 전달하기(매개..
![]()
https://www.hanl.tech/blog/vs-code-react-time-awesome-snippets/
![]()
Vercel 배포 방법 1. github에 레포지토리를 만든다.(Public / Private 모두 가능이기 때문에 소스코드 공유 싫으면 Private로 레포 생성) 2. Vercel 회원가입 및 github 연동 (github으로 회원가입해야 레포지토리가 연동되는지는 모르겠음 웬만하면 깃헙으로 회원가입 ㄱㄱ) 3. Vercel에서 github 레포지토리(repositories) 불러오기(import) 4. Vercel 프로젝트 생성 및 설정 배포 이후 유지보수 1. 깃헙 레포지토리 클론한다. 2.유지보수 작업 후 커밋 3. npm run build 를 통해 재배포 github 호스팅에서 Vercel로 호스팅 서비스 변경 만약 gh-pages 를 이용한 github 호스팅을 이용하는 중이었고 Browse..
![]()
1. public 폴더 아래 background.jpg 이미지를 넣는다 2. 아래 코드 참고하여 배경 이미지를 적용할 DOM에 background-image 속성을 적용한다 const Background = styled.div` height: 100%; background-image: url("./background.jpg"); background-repeat: no-repeat; /* 배경 이미지 반복 설정 */ background-size: cover; /* 배경 이미지 크기 조절 (cover, contain 등) */ background-position: center; /* 배경 이미지 위치 조절 */ `; + 필자는 아래 참고자료를 참고해 경로를 background-image: url("/back..
