React

A JavaScript library for building user interfaces

1. Elements 2. Components와 Props 3. State 4. Lifecycle

1. State 2. Lifecycle

: 간결한 코드로 인해 관리가 편함, Hook을 이용해 state와 lifecycle관리도 가능

: React 16.8버전 이상에서 사용 가능한 라이브러리

: 조건문(if)에 따라 다른 결과를 렌더링하는 것

<li>와 같이 반복되는 값을 반환하기 위해 사용한다.

사용자의 입력값에 접근, 제어해주는 Component.

: State를 상위 Component에서 관리하는 것

: 데이터를 props형태로 계승하는 것이 아니라 전역적으로 관리하는 방법

: 테마나 props를 사용해 스타일을 간편하게 관리할 수 있게 하는 라이브러리

ThemeProvider는 React에서 styled-components를 이용하여 스타일을 관리할 때에 다크모드와 같은 테마 전환 기능을 쉽게 사용하기 위해 사용됩니다.

useRef는 크게 두 가지 경우에 사용할 수 있습니다.

YouTube는 IFrame을 이용한 API를 제공합니다. React는 해당 API를 쉽게 사용하도록 컴포넌트 형태로 제공합니다.

useLocation()은 router에 있는 기능으로 페이지의 URL에 접근할 수 있습니다.

React는 깃허브 등에서 작성한 마크다운 파일을 파싱하여 렌더링할 수 있습니다.

React는 gh-pages라는 패키지를 통해 깃허브 페이지에 쉽게 업로드할 수 있습니다.

상업적 이용 가능한 무료 한글 폰트 사이트로 눈누라는 사이트가 있다. >> 눈누 바로가기 프리텐다드라는 글꼴이 인기순위 제일 높아서 다운받았는데 폴더로 되어있고 폴더에 otf, ttf 파일이 엄청많다. 다운받은 폴더에 web/static 으로 들어가니 css파일이

반응형 디자인을 위해 종횡비에 따라 state를 할당하여 사용하였다. 데스크탑 / 모바일 2가지 모드를 감안하여 세로모드, 가로모드로 나누었다. > viewport의 비율을 계산해서 state로 가로/세로 모드의 boolean값을 설정한다. ThemeProvider

깃허브 페이지를 이용하여 빌드-배포한 React 프로젝트가 있습니다. (링크 참고)\>> \[React] gh-pages를 이용해 배포하기이러한 정적 파일 호스팅 서비스를 이용하여 웹 페이지를 제작하면 데이터베이스 이용과 같은 백엔드 로직은 따로 구현하거나 외부 서비스

z-index는 부모의 값이 우선된다.z-index는 트리구조에서 같은 레벨인 경우 적용됩니다.위 이미지처럼 부모1의 자식 컴포넌트는 z-index가 아무리 높아도부모2가 더 상위로 표시됩니다.feat. GPTReact Portal은 부모 컴포넌트의 DOM 구조와는 독

React에서는 Bootstrap을 설치하여 컴포넌트로 사용이 가능합니다.터미널에서 아래 명령어를 통해 설치합니다.npm install react-bootstrap bootstrap아래와 같이 사용하려는 컴포넌트와 css을 import하여 사용합니다.각종 컴포넌트의 사

컴포넌트의 렌더링 후 이미지를 로딩하면 위 영상처럼 이미지 로딩 시간으로 인해 사용감이 떨어집니다.이를 해결하기 위해 나중에 사용할 이미지를 미리 불러오는 작업이 가능합니다.이미지를 불러오는 역할을 하는 컴포넌트를 만들어 최상위 컴포넌트에 넣어주기만 하면 됩니다.이런

컴포넌트의 scroll을 함수로 조작하는 등의 DOM을 조작하려고 할 때 useRef()를 사용했습니다.그런데 부모 컴포넌트에서 자식 컴포넌트의 요소를 조작하려고 할 때 부모에서 생성한 useRef()를 자식에게 props로 넘겨주는 등의 방법은 유효하지 않습니다.fo

컴포넌트가 렌더링된 후 사이즈를 측정하기 위해 useEffect()를 이용해 setSize()를 실행하는 코드가 있습니다.해당 컴포넌트는 브라우저의 크기가 변동됨에 따라 크기가 변경될 수 있어 window.addEventListener('resize', )를 이용해 다

모바일 브라우저는 사용자의 스크롤 조작을 감지해서 주소창/하단메뉴 UI를 on/off 하는 기능을 지원합니다.위 GIF를 확인하면 네이버에서는 스크롤할때 UI의 on/off가 잘 이루어지는데우측의 사이트는 예상한대로 나오지 않는 것을 확인할 수 있는데요.이유는 붉은색의

Firebase 서비스를 이용하여 방문자 수를 구현해보도록 하겠습니다.우선 Firebase 서비스를 이용하기 위한 초기 세팅은 아래 링크를 참고바랍니다.\>> Firebase 초기 세팅(https&#x3A;//velog.io/@ksj0314/Firebase-%ED%8C