REACT3

• [React] 모바일에서 100vh 맞추기 웹 기준 100vh와 모바일웹 기준 100vh는 조금의 차이를 가지고 있다. 모바일웹은 상단바와 하단바를 포함하여 100vh를 계산하기 때문에, 만일 높이를 100vh로 설정한 컴포넌트가 있다면 아래위 부분이 조금 가려질 수 있다. 이럴 경우 현재 기기의 화면을 계산해서 vh를 설정해주면 된다. 이렇게 할 경우 input을 눌렀을 때, 키보드가 나타나 윗화면을 볼 수 없게 되는 일이 발생하지 않는다. 나는 CRA를 사용했기 때문에 아래와 같은 방법을 사용했다. (CRA, 즉 creat-react-app을 사용했을 때는 아래 코드를 복사해서 설정하면 완료된다.) App.js에 추가 function setScreenSize() { let vh = window.innerHeight * 0.01; documen.. REACT/React-개념정리 2023. 1. 19.

• 

  [React] React Templates 리액트 템플릿이란 홈페이지 디자인 중 자주 쓰이는 React 모델을 제작하여, 수정이 가능하도록 배포되는 디자인 템플릿. 특히 리액트 템플릿은 무료로 배포되고 있는 것이 많기 때문에 bootstrap과 적절히 섞어 사용하면 빠른 시간 안에 프론트를 마무리할 수 있어 편리하다. 아래는 내가 자주 사용하는 리액트 템플릿 사이트이다. https://www.creative-tim.com/templates/react-free 29+ React Free Themes And Templates @ Creative Tim www.creative-tim.com https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci 35+ Free React templat.. REACT/React-개념정리 2022. 12. 6.

• [ React ] 실전에서 사용하는 실전형 문법 STEP 정리 실제로 개발을 하면서 사용되는 문법들을 개발 시 사용하는 순서에 맞추어서 정리해 보았다. ui나 redux 사용 절차는 언제나 똑같기 때문에 숙지해두면 무조건 도움이 된다. 사실상 나를 위한 메모장.. useState / Component / 동적인 UI 만들기 / map( ) / props / 태그 / import, export / Router / useEffect() / AJAX, axios / Redux / 삼항연산자의 object , array 자료형 응용 / React-Query / useMemo useState() 용도 : html에서 보여주어야 하는 내용 중, 자주 변경될 것 같은 것에 사용한다. state가 바뀌면 html은 자동으로 재렌더링된다. ▼ 사용법 1. import { useSt.. REACT/React-개념정리 2022. 11. 17.