REACT

리액트란?UI를 개발하기 위한 자바스크립트 라이브러리가장 인기있는 라이브러리리액트의 특징컴포넌트 기반컴포넌트란 UI를 구성하는 독립적이고 재사용 가능한 부품이다.선언적 문법명령형 문법의 반대 개념이다.SPA (single page application) 구조자바스크립트

먼저 Node.js를 깔아준다.https://nodejs.org/ennode -v 명령어를 cmd에 입력하여내가 깐 노드의 버전을 확인 할 수 있다.그다음 cmd에 아래와 같이 입력해준다.npx create-react-app 폴더이름\-> 리액트 프로젝트 폴더

사용하는 이유:기존 자바스크립트에서 타입에 관대해 생겨나는 버그와 에러를 해결하기 위해 정적 타입 분석기를 사용한다.타입을 체크하여 문제를 해결 할 수 있도록 도와주는 라이브러리(비슷한 것으로는 리액트 전용 정적타입 분석기 FLOW플로. 타입스크립트는 자바스크립트 전반

자바스크립트 확장 문법가상 트리를 만들기 위해 사용된다.자바스크립트와 HTML을 동시에 사용하며, 함수가 HTML을 반환하거나 HTML에 자바스크립트 변수들을 바로 사용할 수 있는 일종의 템플릿 언어이다리액트가 가상트리를 실제 트리로 변환 후 문서에 주입한다자바스크립트

리액트에서 state를 사용하는 이유 리액트는 변수가 바뀌어도 무시하고 컴포넌트를 재실행, 렌더링 하지 않는다. 리액트가 값을 바꿀 수 있도록 재실행 하기 위해서 사용되는 것이 state라는 리액트 훅! > - hook: 리액트에서 제공하는 특별한 함수, 리액트에

useContext로 상위 컴포넌트가 전달한 props에 접근 할 수 있다.훅을 사용할 땐 문서 가장 위에 아래와 같이 적어주어야 한다.import { createContext, useContext } from "react"그리고 const AuthContext = c

useState를 사용한 간단한 예제를 살펴보자!처음에는 구독하기 상태였다가, 클릭하면 구독중으로 변하고, 구독중을 누르면 다시 구독이 취소되는 모습의 버튼을 만들어보자.먼저 파일 상단에 import { useState } from "react"를 작성하여 useSta

mdn에서 라우터를 3가지로 정의한다.네트워크 계층에서, 라우터는 데이터 패킷 방향을 결정하는 네트워크 장치입니다. 라우터는 사용자가 인터넷과 상호작용할 수 있도록 관련 업체에서 배포합니다.애플리케이션 계층에서, Single-page application의 경우, 라우

간단한 페이지에 user 이름을 입력해야 게시글을 볼 수 있는 인증 라우터를 만들어보자!기본 구조는 메인 컴포넌트, home, about, posts ( post1, post2 ) 등등 이다.이전 게시글의 업데이트 버전이므로 구조가 이해가 안된다면 참고하기!추가 된건

useEffect를 이용해서 앱에 여러가지 효과를 줄 수 있다.비동기적으로 작동한다. 비동기적 작동이란? 요청을 보낸 후 응답에 관계없이 다음 동작을 실행하는 것을 비동기라고 한다(쉽게 이야기 하면 제일 나중에 작동한다는 뜻)useEffect( effect )랜더링 될

Warning: Each child in a list should have a unique "key" prop.map이나 filter에서 가장 바깥 엘리먼트에 key값을 추가 하면 해결 된다!

Warning: Invalid DOM property for. Did you mean htmlFor?label에서 input과 연결하기 위해 for를 사용했는데, htmlFor를 사용해야한다고 한다! htmlFor로 변경해주니 경고 해결

리액트 폴더를 만들어주고, 아래 링크로 들어간다swiper site🔽 https://swiperjs.com/그리고 사이트 상단에 Docs를 호버하면 메뉴가 나온다.여기서 Swiper React를 클릭해주자!페이지로 들어가면 리액트에서 사용할 수 있는 방법이적

리액트로 포트폴리오를 만드는 중에, 스크롤을 내리면 헤더가 사라지고 스크롤을 올리면 헤더가 보이는 기는을 추가하고 있었다. 삼항연산자를 이용하여 scrollMove ? { top: '-180px'} : { top: '0px' } 이런식으로 작성하여 성공! 근데

html에서 스타일을 엘리먼트에 바로 적용할 때는 style="margin:1rem;"와 같은 방법으로 적용을 해주었다.리액트에서는 객체형태의 값을 전달주어 인라인스타일을 적용할 수 있다!결과:위 처럼 바로 스타일을 구구절절 적으면 가독성이 떨어 질 수 있기 때문에미리