본문 바로가기

Coding/react

[react] 이미지 흐릿하게 나오는 경우 흐릿 제가 업로드한 로고는 뭔가 흐릿합니다. 사이즈도 큼지막한데 사이즈를 줄이면 흐릿해지네요 원인은 백터파일이 아니여서 저렇게 나오는 것이였습니다. 알고는 있었지만 저화질을 늘렸을때만 흐릿해 지는 줄 알고있었습니다. png는 고화질을 css로 사이즈 줄여사용할때도 흐릿해 집니다. 결론은 svg 파일을 사용하면 제대로 나옵니다. 더보기
[react] 이미지 태그 잘못된 방식 function App() { return ( 더보기
[react] 라우터 설치 및 적용 설치 yarn add react-router-dom 적용 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; // 여기추가 import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( // 여기추가 , document.getElementById('root') ); reportWebVitals(); BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTM.. 더보기
[react] 프로젝트 생성 후 내가 하는 것들 순서 yarn create react-app 이름 깃연동 src/components 만들어둠 src/pages만들어둠 src/resources만들어둠 Prettier-Code formatter 설정하기 (링크) 테스트 컴포넌트 만드록 yarn start 돌려보기 이후는 그냥 구현하면서 찾아보면서 코드 짜면서 배우면 됨. 라우터 설정 (링크) yarn add axios 더보기
[react] JSX 문법 메모 JSX 일단기본적으로 리액트컴포넌트에서 JSX 문법을 리턴합니다. // error function App() { const name = undefined return name } // ok function App() { const name = undefined; return {name || "react"}; } 조건문 JSX 내부의 자바스크립트 표현식에서 if 문을 사용할수 없습니다. -> 삼항 연산자 사용해야합니다. import React from "react"; function App() { const name = "리액트"; return ( {name === "리액트" ? ( 리액트 입니다! ) : ( 리액트가 아닙니다 )} ); } export default App; 이렇게 하면 됩니다. 리액트가.. 더보기
[react] 개념설명 리액트 데이터가 변경되면 뷰도 변경을 해줘야합니다. 예를들어 js 변수 age = 20 이면 , HTML에도 나이: 19 19를 20으로 변경을 해줘야했습니다. 페북개발팀에서는 데이터를 HTML에 데이터를 포함하기로 합니다. 그러면 age가 20이 되면 , HTML에도 나이: { age } 따로 변경할 필요가 없어집니다. 리액트개발팀은 데이터가 변할때 마다 전체 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용하려 했지만, DOM 전체를 리렌더링하는것이 너무 느렸습니다.🤨 (만약 input값에 hello 를 입력한다면 h, e, l, l, o 총 5번 이나 전체 DOM이 리렌더링 되기때문) 하지만 리액트는 virtualDOM 을 사용해서 전체 DOM이 5번이나 리렌더링 되지 않고 필요한 부분만 .. 더보기
최적화 설정하기 (react-virtualized, immer) react-virtualized 2,500 개 컴포넌트 중 2,491 는 스크롤하기 전에는 보이지 않음에도 불구하고 렌더링이 이루어집니다. react-virtualized를 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있습니다. 만약 스크롤되면 해당 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킵니다. yarn add react-virualized import React, { useCallback } from 'react'; import { List } from 'react-virtualized'; import TodoListItem from './TodoListItem'; import './TodoList.scss'; c.. 더보기
[react] 스타일링 설정하기 Sass 사용하기 Sass 는 .sass 확장자와 .scss 확장자를 지원합니다. 보통 .scss 확장자를 사용합니다. yarn add node-sass 이 라이브러리는 Sass 를 css로 변환해줍니다. sass-loader 설정 커스터마이징하기 create-react-app 으로 만든 프로젝트는 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져 있습니다. 이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject 명령어를 통해 세부 설정을 밖으로 꺼내 주어야 합니다. (commit 한후) yarn eject webpack.config.js 에서 "sassRegex" 두번째 탐색결과에서 use 부분을 아래와 같이 수정합니다. { test: sassRegex, exclude: sassModuleReg.. 더보기