본문 바로가기

JavaScript/React27

[React] 라우팅(Routing)이란? 🍿 라우팅(Routing)이란? 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것 React 자체에는 이런 기능이 내장되어 있지 않다. (이것이 React가 Framework 가 아닌 Library 로 분류되는 이유) 그래서 React의 라우팅 기능을 위해 가장 많이 쓰이는 React-router를 사용한다. 🍿 리액트 라우터(React Router)란? angular이나 angular2, backbone 같은 프레임워크는 프레임워크이기 때문에 라우팅 기능이 기본적으로 들어있다. 하지만 React는 View만 담당하는 라이브러리다. 그래서 라우팅을 담당하는 react-router을 따로 설치해주어야 한다. 그리고 또 나중에 Model과 Controller를 담당하는 패키지를 설치해야 한.. 2021. 11. 24.

[React] 10가지 Hooks Collection of sexy React Hooks ready to install with NPM - useTitle - useInput - usePageLeave - useClick - useFadeIn - useFullscreen - useHover - useNetwork - useNotification - useScroll - useTabs - usePreventLeave - useConfirm - useAxios 1. useInput useInput은 기본적으로 Input을 업데이트 한다. export const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onCh.. 2021. 11. 24.

[React] React란? 🌸 React란? 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리다. 🌸 React의 장점 Javascript 객체 형태의 Virtual DOM을 사용하여 애플리케이션의 성능을 향상시킨다. Server & Client 사이드 rendering 지원을 통해 브라우저 측의 초기 렌더링 딜레이를 줄이고 SEO 호환도 가능해진다. 🔥 렌더링(Readering)이란? html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것. 컴포넌트의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용이 용이하다.🔥 컴포넌트(Component)란? 재사용이 가능한 UI 단위. props를 input으로 하고 UI가.. 2021. 11. 18.

[React] State & Event 🍷 State '상태'라는 뜻. 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태 값. 화면에 보여줄 컴포넌트의 UI 정보(상태)를 지니고 있는 객체. State는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있다. State는 컴포넌트가 마운트 될 때 기본값을 갖게 되고 우리는 이 State를 활용해 데이터를 변화시켜줄 수 있다. 객체의 형태를 갖고 있다. State를 변경하기 위해서는 setState 함수를 사용해야 한다. class 컴포넌트에서 State를 쓸때는 컴포넌트의 형태가 클래스이기 때문에 this.state로 사용할 수 있다. 코드로 작성해보면 더욱 쉽게 이해할 수 있다!.. 고 한다. 🍷 State 객체 클래스형 컴포넌트에서 State, 즉 해당 컴포넌트의 상태를 .. 2021. 11. 18.

[React] Props & Event 💣 Props properties(속성). 단어 뜻 그대로 컴포넌트의 속성값. 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다. props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다. 즉, props는 부모에서 자식으로 보내주는 속성이다. State와 마찬가지로 코드로 작성해보면 더욱 쉽게 이해할 수 있다!.. 고 한다 💣 Props 객체 클래스형 컴포넌트에서 props, 즉 컴포넌트의 속성을 어떻게 정의하는지 알아보자. // Parent.js import React from 'react'; import Child from '../pages/Child/Child'; class Parent extends React.Compone.. 2021. 11. 18.

[React] map 함수 적용시 key props를 부여하는 이유 React에서 map 함수를 사용할 때 렌더링엔 문제가 없지만 console 창에 이렇게 뜰 때가 있다. mapping하는 과정에서 배열의 각 요소마다 고유한 key 값을 지정해줄 수 있는데, 그것을 생략하면 저런 오류가 뜬다! 그래서 ⭐ list 내의 각 child에는 고유한 key 값이 있어야한다. ⭐ 🔥왜 key 값을 줘야할까? React는 렌더링 할 때 기존 배열과 새로운 배열을 비교해서 변경된 부분만 다시 렌더링한다. 따라서 요소가 변경되었을때 더 빠르고 효율적으로 렌더링 하기 위해 요소 고유의 key 값을 준다. 참고 사이트 ▶ 리스트와 Key - React 2021. 11. 18.

이전 1 2 3 4 5 다음

티스토리툴바