React를 글로 배워보자

JSX가 없다면..?기본적으로 바닐라 JS는 HTML, CSS, JavaScript가 모두 분리되어 있다.물론 HTML파일에서 한번에 적을 수 있지만 그렇다면 파일이 너무 길어 가독성이 매우 떨어질 것이다.이때 React문법을 활용하면 HTML에는 JS에서 작성한 내용

Set up a modern web app by running one command: 명령어 하나만으로 리액트 개발환경을 구축할 수 있다.React를 이용해 웹 애플리케이션을 개발하기 위해 필요한 도구들을 모아놓은 "툴 체인"이다. 왜..? : React는 UI를 구축

JSX...? JavaScript를 확장한 문법으로 React의 엘리먼트를 생성한다. 자바스크립트 코드 안에서 UI 관련 작업을 할 때 시각적으로 많은 도움이 될 수 있기 때문에 사용하며 React에서 도움이 되는 에러 및 경고 메세지를 표시할 수 있도록 해준다.

사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는것이다.비록 이전에 우리는 html에서 a태그를 통해 링크를 걸어 페이지를 이동했었지만 React는 SPA, 페이지가 하나인 애플리케이션을 만들어주기 때문에 경로에 따라 다른 UI를 보여주는 라우팅 기능이 필요하게

Syntactially Awesome Style Sheets, 기존 CSS파일의 불편한 부분을 개선하고자 나온 CSS 전처리기 중 하나이다.sass 설치sass vs scsssass 문법을 개선한 것이 scss 문법으로 더 넓은 범용성과 CSS 호환성 등의 장점이 있기

클래스 컴포넌트에서만 사용할 수 있었던 state관리와 lifedcycle 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수. useState와 같은 use로 시작하는 내장 Hook이 있으며 컨포넌트 간에 상태 관련 로직을 재사용하기 위해 Hook을 직

Props란 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다. props를 이용하면 변수, 함수, state 값, event handler등 어떤 값이든 자식 컴포넌트에 전달할 수 있다.부모 컴포넌트에서 자식 컴포넌트에게 정보를 전달하기 위해서는 1. 자식

🔥 useState() 컴포넌트가 가질 수 있는 상태 컴포넌트의 상태를 생성하고 간편하게 업데이트 할 수 있게 해준다. 현재 상태값은 state에, state를 변경하고 싶을 때는 setState 함수를 이용. state가 변경이 되면 해당 컴포넌트는 자동으로 재렌더

🪨 라우팅을 설정하는 가장 기본적인 방법은 정적라우팅이다.정적 라우팅이란 Router 컴포넌트에서 미리 어플리케이션에서 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의해두는 방식.하지만 규모가 큰 어플리케이션에서는 경로를 미리 설정하는

🖊️ 쿼리 스트링...? URL의 한 부분으로 요청하고자하는 URL에 부가적인 정보를 포함하고 싶을 때 사용한다. ❓ 왜 사용할까..? 일반적으로 URL을 통한 정보요청은 비교적 단순한 형태로 이루어져 특정 리소스에 대한 정보를 얻고자 한다는 단순한 형태의 요청

🖌️ Styled Component...? 말그대로 style이 있는 component이다. Sass와 같은 css 전처리기 (자신만의 특별한 syntax를 가지고 css를 생성하도록 하는 프로그램)이 등장했음에도 불구하고 자바스크립트의 상태 값을 공유할 수 없어서

Virtual DOM의 탄생 배경 DOM(Document Object Model)이란..? DOM은 웹 페이지를 이루는 HTML 태그들을 자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM Tree 안에는 각각의 element에 상

데이터 바인딩이란 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다.자바스크립트에서는 데이터가 변경될 때마다 화면의 데이터와 맞춰주는 과정이 필요했지만 리엑트에서 데터

컴포넌트간에 useNavigate 훅을 사용하면서 데이터를 함께 넘겨주고 싶을 때가 있다.이럴 때에는 useNavigate와 useLocation을 적절히 활용해주면 된다.위의 UserCard 컴포넌트에서는 user state에 유저 정보를 담고 있다.해당 컴포넌트를

로그인하지않은 사용자에게 장바구니 페이지를 보여주지 않거나 관리자에게만 관리자 페이지를 보여주고 싶을 때 useNavigate를 많이 사용한다.관련해서 <Navigate> 요소도 있어 함께 정리해보려고 한다.이벤트가 발생했을 때 경로를 변경할 수 있는 메서드이다.

react-query는 서버에서 받아온 정보들을 캐싱해두었다가 사용할 때 아주 유용하다.하지만 특별한 설정을 하지 않는다면 기본적으로 데이터가 변경되었을때, 윈도우에 다시 포커스 되었을 때(화면 전환), 네트워크가 다시 연결되었을 때 다시 정보를 받아오게 된다. 우리는