React (28) 썸네일형 리스트형 NextJS Image 사용 방법 NextJS의 Image 컴포넌트를 이용하면 이미지 최적화를 쉽게 할 수 있다. 확장자를 저용량인 webp로 바꿔준다거나 viewport에 적합한 이미지를 다운로드 한다거나 lazy loading 등등 개발자가 일일이 하기 귀찮은 작업을 알아서 해준다. 다만 일반 image 엘리먼트가 아니기 때문에 잘 파악하고 있지 못하면 화면에 따라 레이아웃이 변해야하는 등의 반응형 개발에 어려움이 생긴다. 공식문서에서 소개하는 내용을 쉽게 볼 수 있도록 정리하고자 한다. src 아래와 같이 이미지를 import 해서 src에 넣는다. import Image from 'next/image' import profilePic from '../public/me.png' /* ... */ dynamic import는 불가능하.. Styled Components에서 keyframes의 prop이 작동하지 않을 때 해결 방법 styled componets의 컴포넌트 안에 애니메이션을 위한 keyframes 코드를 넣으면 잘 작동한다. const StyledContainer = styled.div` @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } `; 그러나 keyframes 안의 값을 바꿔야 할 일이 생겼을 때 잘 작동하지 않는 문제가 생겼다. 위 방식이 정상적인 방법이 아니기 때문이다. styled components에서 keyframes를 사용하려면 아래와 같이 해야 한다. import styled, { keyframes } from 'styled-components'; const moveR.. 리액트 프로젝트 폴더 구조와 컨벤션 규칙 여러 사람과 협업을 할수록 규칙은 중요하다. 규칙 없이 마구 개발하면 서로가 작성한 코드의 의도를 파악하는 데에 더 많은 시간을 쏟게 되고 오히려 혼자서 개발하는 것보다 못한 퍼포먼스를 낼 수도 있다. 여러 규칙 중 폴더와 파일을 어떻게 배치할지를 잘 정하는 게 중요하다고 생각한다. 아무리 세부 코드가 엉망이어도 파일 구분이 명확하면 엉망인 코드와 상관없이 다른 파일(또는 모듈)에서 좋은 코드를 짤 수 있고 추후 필요시 엉망인 코드를 손 볼 수 있다. 또한 코드 퀄리티 자체가 별로라고 해도 props 등의 인터페이스가 명확하고 제대로 작동한다면 그저 모듈을 사용하는 것일 뿐이지 세부적인 복잡한 로직을 들여다 볼 필요는 없다. 마치 node module을 쓰듯이 말이다. 필자가 여러 프로젝트를 진행하면서 .. NextJS에서 static html로 export를 해서 AWS의 S3, Route 53, Cloudfront를 이용해 배포할 때 발생하는 route 문제 해결 방법 NextJS로 작업하고 빌드하면 Server Side Rendering을 구현할 수 있다. 요청이 있을 때마다 node가 돌아가는 서버에서 html 파일을 마련해 전달한다. 그러나 빌드시 next export라는 명령어를 쓰면 Server Side Rendering이 필요 없는 정적인(static) html 파일로 뽑아낼 수도 있다. 물론 이 때에는 Server Side Rendering과 관련된 option을 사용하지 못한다. 이 파일을 배포하는 가장 쉬운 방법으로는 vercel에 remote repository를 등록해서 올리는 방법이지만 회사 등에서 AWS를 이용해 배포해야 하는 경우도 있다. 이런 때에는 route 때문에 좀 고생을 하게 되어 기록으로 남긴다. 미리 알고 있어야 할 것들 S3, R.. NextJS에서 SVG 불러오는 방법 babel-plugin-inline-react-svg을 설치한다. npm i babel-plugin-inline-react-svg 루트에 .babelrc 파일을 생성해서 아래 내용을 입력한다. { "presets": ["next/babel"], "plugins": ["inline-react-svg"] } 아래와 같이 바로 불러올 수 있다. import CircleIcon from './circle.svg'; 참고 package.json { "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/icons-material": "^5.2.5", "@mui/material": "^5.2.5", "babel-plugin.. React memo, useCallback 올바로 사용하기 리액트에서 리렌더링은 빈번히 일어난다. 리렌더링은 컴포넌트를 구성하는 함수를 다시 실행하는 것이라고 생각하면 좋다. 리렌더링의 목적은 state 변화로 무엇이 달라졌는지를 파악하기 위해서이고 부모의 state가 변했으면 당연 말단 자식까지 전부 리렌더링이 된다. 때문에 자식이 많고 복잡한 부모 컴포넌트일수록 리렌더링시에 많은 연산을 하게 된다. (여기에서의 리렌더링은 실제 DOM과는 관련이 없고 Virtual DOM을 생성하기 위한 리렌더링이다.) 이러한 경우를 위해 React.memo를 쓸 수 있다. 자식 컴포넌트에 memo를 쓰면 props의 값들을 메모리에 저장하고 리렌더링시에 비교하여 값이 달라졌을 때에만 자식 컴포넌트를 렌더링시키고 그렇지 않으면 건너뛴다. 메모리에 저장하는 것과 비교하는 로직이.. setState의 파라미터에 반드시 함수를 넣어야 하는 경우 useState 훅을 이용하면 state와 setState 함수를 얻을 수 있다. const [state, setState] = useState(0); setState 함수에 값을 넣으면 리액트 컴포넌트가 리렌더링 되고 state 값을 바꾼다. setState(1); 그러나 간혹 setState 함수에 함수를 넣는 경우가 있다. setState((state) => state + 1); 이전의 state 값을 불러와서 1을 더한다는 뜻이다. 아래와 별반 다를 게 없을 것 같다. const [state, setState] = useState(0); /* ... */ setState(state + 1); useState에서 받는 state 값도 이전의 값일 것이기 때문이다. 그러나 state가 여럿일 경우에 .. React의 JSX 문법 이해하기 리액트의 각 컴포넌트는 하나의 함수이고 JSX 문법 형태로 된 값을 리턴한다. JSX를 사용하는 이유는 HTML 마크업 랭귀지와 비슷하게 생겨서 컴포넌트가 어떤 엘리먼트로 구성돼 있는지 한 눈에 파악하기 쉽기 때문이다. 그러나 JSX는 결국 자바스크립트이고 JSX의 각 요소들이 무엇을 의미하는지 알아야 다양한 방식으로 리액트를 구현할 수 있다. import React from 'react'; import Profile from './components/Profile'; function App() { return ( hello ); } export default App; 위의 JSX 문법은 아래의 자바스크립트 코드와 같다. import React from 'react'; import Profile from.. 이전 1 2 3 4 다음
