본문 바로가기

리액트13

[react] JSX 배열 반복문 렌더링 - for, map, forEach 리액트에서 JSX 반복 렌더링 JSX와 중괄호 반복문을 사용하기 위해서는 JSX안에서 중괄호({}, curly braces)를 써야 합니다. JSX는 리액트 컴포넌트의 return문으로 반환되는 코드입니다. javascript를 확장한 문법으로, React에서 UI를 구현하는 데 사용됩니다. (HTML과는 다릅니다) function App() { const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; return {weekArr[0]}; } 이 위치에서 반복 렌더링을 하기 위해 사용이 가능한 방법과 그렇지 않은 방법을 살펴보겠습니다. 1. for 문❌ return문 안에서는 아래처럼 for문을 사용하면 안 됩니다. // wrong funct.. 2024. 1. 4.

[react] 리액트 전체화면 넘기기 스크롤링(full page scroll) 리액트 전체화면 스크롤링 마우스 휠 움직임에 반응하여 전체화면을 스크롤링하는 코드를 구현해 보겠습니다. 1. outer div와 inner div(3개)를 생성해 줍니다. inner div는 각각 위 결과물의 1,2,3페이지가 됩니다. App.js import "./App.css"; function App() { return ( 1 2 3 ); } export default App; App.css .outer { } .inner { } .bg-yellow { background-color: #f7f6cf; } .bg-blue { background-color: #b6d8f2; } .bg-pink { background-color: #f4cfdf; } 2. 스크롤은 body가 아닌 outer div에서 제.. 2021. 6. 18.

[react] 리액트 모달(modal) DOM tree, createPortal createPortal 모달은 사용자에게 항상 최우선으로 출력되어야 하는 경우가 많습니다. react의 DOM tree를 보면, 모든 컴포넌트가 최상위 컨테이너인 root()에 종속되는데, 모달의 경우에는 어느 컴포넌트에서 호출이 되어도 모든 컴포넌트 위에 존재합니다. 따라서 물리적인 구조상 root를 벗어나는 것이 더 깔끔할 수 있습니다. 모달 뿐만이 아니라 애플리케이션 내에서 리액트 코드를 부분적으로만 사용하는 경우에도 root 이외의 DOM tree를 구성해야 하는 경우가 있습니다. 이럴 때 createPortal을 사용하면 컴포넌트를 기존의 DOM tree에서 물리적으로 분리할 수 있습니다. 구문 react-dom 패키지의 createPortal을 사용해 줍니다. createPortal(child.. 2021. 3. 28.

[react] 불필요한 리렌더링 방지하기 - React.memo 성능 최적화 React.memo 리액트 애플리케이션에서는 state의 변화가 없는 컴포넌트도 다른 요인에 의해 리렌더링 되는 경우가 있습니다. 대표적으로 부모가 렌더링 되면서 함께 렌더링이 되는 경우입니다. 이런 경우에는 React의 memo 메서드로 해당 컴포넌트를 저장했다가 재사용할 수 있습니다(memoization). memo 메서드로 감싼 컴포넌트는 렌더링이 트리거 될 때 prop의 변화가 없는 경우 이전 렌더링 결과를 재사용합니다. 예시 App.js import React, { useState } from "react"; import Item from "./Item"; const App = () => { const [numbers, setNumbers] = useState([1, 2, 3]); return .. 2019. 12. 23.

[react] 올바른 리액트 조건부 렌더링 (if else 구문과 ternary operator, && 차이) 리액트의 조건부 렌더링 리액트에서 JSX를 조건에 따라 렌더링 할 때에는 크게 두 가지 방법이 있습니다. 1) if, else 구문을 사용하는 방법과 2) ternary operator를 사용하는 방법입니다. 두 가지 방법 모두 겉으로 보기에는 condition에 따른 JSX를 렌더링 한다는 점에서 비슷하지만, 경우에 따라 성능상의 차이가 크게 나타나기도 합니다. 간단한 예시를 통해서 어떤 차이가 있는지 살펴보겠습니다. 1. if / else if, else를 활용한 예시입니다. showing state에 따라서 Header 컴포넌트의 렌더링 여부를 결정하도록 구현했습니다. import React, { useState } from "react"; import "./App.css"; function App.. 2019. 9. 9.

[react] 리액트 react-router-dom 사용법 - BrowserRouter, Route, Switch, Link react-router-dom SPA(Single Page Application)의 경우 페이지 렌더링에 필요한 모든 자바스크립트가 초기에 브라우저에게 전달되기 때문에 페이지(혹은 탭) 간 이동 시 원칙적으로는 서버에 재요청을 할 필요가 없습니다. 따라서 SPA에서 다른 페이지로 이동할 때에 태그를 사용하는 것은 서버에 불필요한 요청을 보내는 안티패턴에 해당됩니다. react-router-dom을 사용하면 이런 상황에서 브라우저에 이미 로드되어 있는 코드들을 활용하여 페이지간 이동을 구현할 수 있습니다. react-router-dom은 리액트에서 SPA를 구현할 때 가장 많이 쓰이는 패키지 중 하나입니다. 기본적으로 웹페이지는 내부에서 URL을 요청할 때 페이지 전체를 서버에 재요청한 후 새로고침합니다... 2019. 8. 27.

[react] 예제로 따라하는 리액트 훅(hook) - useEffect *이전글 2019.08.02 - [react] 예제로 따라하는 리액트 훅(hook) - useState [react] 예제로 따라하는 리액트 훅(hook) - useState 간단한 예제를 통해서 리액트 훅의 useState을 살펴보겠습니다. 작업의 처음단계부터 하나씩 진행하니 리액트에 처음 입문하시는 분들도 천천히 진행해보시길 바랍니다. create-react-app으로 프로젝 codingbroker.tistory.com useEffect useState에 이어서 이번 글에서는 useEffect를 살펴보겠습니다. useEffect는 컴포넌트의 side effect를 수행하기 위해 사용됩니다. side effect란 컴포넌트가 화면에 그려지는 초기 렌더링과정에 포함되지 않는 별개의 작업으로 대표적으로 H.. 2019. 8. 3.

[react] 예제로 따라하는 리액트 훅(hook) - useState useState 간단한 예시를 통해서 리액트 훅의 useState을 살펴보겠습니다. 위의 사진들처럼 화면 아래쪽에 3개의 동그란 버튼을 누르면, 화면 중앙의 정사각형이 해당하는 버튼의 색으로 변경되는 예입니다. 프로젝트 설치단계부터 하나씩 진행하겠습니다. 리액트에 처음 입문하시는 분들도 천천히 따라 해보시길 바랍니다. create-react-app으로 프로젝트를 설치합니다. npx create-react-app hooks-react 저는 에디터로 Visual Studio code를 사용하겠습니다. code 명령어로 프로젝트를 실행합니다. code hooks-react 기본화면을 지우기 위해 src폴더에서 App.js와 index.js를 제외한 모든 파일을 지워줍니다. 스타일 작업을 위해 styled-co.. 2019. 8. 2.

[react] 리액트 훅(react hook)이란? - 클래스형 컴포넌트와 비교 React Hook React 16.8 버전부터 정식으로 릴리즈 된 React Hook에 대해 살펴보겠습니다. 1. 리액트 컴포넌트의 두 가지 형태 리액트에서는 두 종류의 컴포넌트가 사용됩니다. 클래스형 컴포넌트와 함수형 컴포넌트입니다. 기존의 개발방식에서는 주로 함수형 컴포넌트를 사용하며, 상태 관리나(state) 생명주기 관련(life cycle method) 기능이 필요할 때만 클래스형 컴포넌트를 활용하였습니다. 주로 함수형 컴포넌트를 사용했던 이유는 클래스형 컴포넌트의 단점 때문입니다. 2. 클래스형 컴포넌트의 단점 2-1. 복잡성과 길이 클래스형 컴포넌트는 constructor, this, binding과 같은 여러 규칙을 따라야 하며, 이로 인해 코드가 복잡하고 길어질 수 있습니다. 클래스 기.. 2019. 7. 30.

[react] styled components에서 global style(전역 스타일) 적용하기 Global style styled-components는 컴포넌트 스코프 뿐만 아니라 전역 스타일을 적용하는 기능도 제공합니다. 전역 스타일은 애플리케이션의 모든 컴포넌트에 영향을 미치는 CSS 규칙입니다. 이를 통해 폰트, 색상, 마진 등과 같은 기본적인 스타일을 일관되게 설정할 수 있습니다. 1. createGlobalStyle을 사용하여 전역 스타일을 정의하는 컴포넌트를 생성합니다. import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color:.. 2019. 7. 30.

[react] styled components에서 animation 및 keyframes사용하기 Animation과 keyframes styled-components는 CSS의 @keyframes 규칙을 javascript 구문으로 통합하여 애니메이션을 적용할 수 있게 해 줍니다. 또한 keyframes를 생성하다 보면 비슷한 이름으로 중복되는 경우가 많은데요. styled-components에서는 css의 @keyframes와 달리 컴포넌트 파일별로 네임스페이스가 구분되어 중복될 걱정 없이 keyframes를 생성할 수 있습니다. import React from "react"; import styled, { keyframes } from "styled-components"; const App = () => ; const bounce = keyframes` 0% { transform: scale(1.. 2019. 7. 30.

[react] styled components에서 style확장(재사용)하기 style 재사용 styled-components로 생성한 컴포넌트는 일반 React 컴포넌트처럼 상속이 가능합니다. 중복된 스타일을 가지거나 특정 스타일을 확장하고 싶을 때 컴포넌트를 확장하여 사용할 수 있습니다. Button을 만들고 GreenButton과 BlueButton에서 Button을 확장하여 각각 스타일을 적용해 보겠습니다. import React from "react"; import styled from "styled-components"; const App = () => ( 버튼 초록버튼 파란버튼 ); const Container = styled.div` display: flex; `; const Button = styled.button` outline: none; border: non.. 2019. 7. 30.

이전 1 2 다음

티스토리툴바