React

드디어 React를 공부하기 시작했다 😀 현재 진행중인 부트캠프의 커리큘럼상 React를 배울 차례인 것과 그냥 프론트엔드 개발자가 되기 위해 공부하는 라이브러리 혹은 프레임워크중 보통 가장 많이 선택하는 친구이기 때문이라는게 React를 시작하게된 이유이긴 하지만.

리액트를 처음 공부하면 위와 같은 초기 셋팅 방법을 보고 냅다 따라 치곤 한다(일단 나부터)리액트를 쓰려면 이것저것 뭔가 세팅해줘야 하는 것들이 많고 어려운데 Create React App(CRA) 라는게 알아서 딱 해주니 갖다 쓰면 되겠군! 정도로 이해하고 넙죽 사용

이제부터가 사실상 리액트의 본격적인 시작이라고 할 수 있을 것 같다. 리액트를 하면서 자주 사용하게될 JSX에 대해 정리해보자.JSX 는 React 에서 일반적으로 사용되는 많은 개발자에게 친숙한 구문을 사용하여 구성 요소 렌더링을 구조화하는 방법을 제공하는 JavaS

🤖 Props란? props는 컴포넌트에 원하는 값을 넘겨줄 때 사용하는 것으로, 다음과 같이 사용한다. Greeting 이라는 컴포넌트를 App 이라는 다른 컴포넌트에서 Greeting 컴포넌트를 사용하는데, Greeting 컴포넌트에 name 이라는 값을 넘겨

이벤트란 웹브라우저에서 사용자 혹은 개발자로 인해 발생하는 HTML 요소에 대한 사건의 발생을 말한다.우리는 js를 공부하며 HTML로 열심히 만든 요소들이 여러 이벤트에 따라 특정한 동작으로 알맞은 반응을 하도록 열심히 이벤트 처리를 해줬다.리액트 또한 이런저런 컴포

🎀 Hook이란? 리액트 훅은 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용되는 기능이다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있지만, 기존에는 함수형은 상태 관리조차 할 수가 없는 간단한

✈️ 성능 개선 리액트는 성능 최적화를 위한 Hook을 제공한다. 코드를 효율적이게 개선하는 방법은 여러가지가 있겠지만 이번에 소개할 useMemo와 useCallback 이라는 Hook은 '메모이제이션(Memoization)' 이라는 것을 활용하는 기술이다. 메모

useRef는 저장공간, DOM 요소 접근을 위해 쓰이는 Hook이다.일반적으로 React에서 DOM Element에 접근할 때 사용하는데 이때 DOM Element의 ref 속성을 이용한다. js의 document.querySelector 같은 애들의 역할이라고 보면

🎯 SPA 에서의 라우팅 웹사이트는 사용자가 어떤 페이지로 이동하기 위해 경로를 요청하면 그 경로에 해당하는 페이지를 보여줘야 한다. MPA 방식은 실제로 페이지가 여러개가 있고 서버측에서 각 경로에 해당하는 페이지를 응답하는 라우팅 처리를 해서 페이지 이동을 구현

🎏 중첩 라우팅 웹사이트라면 어떠한 경로에 대해 하위 경로들을 파서 페이지를 여러개로 분기시켜야하는 경우가 있을 수 있다. 예를 들면 어떠한 페이지(경로)에 들어갔는데 거기에 또 다른 링크가 있어 또 다른 뷰를 볼 수 있는 경우이다. 이렇게 같은 경로 내에서 하위