본문 바로가기

STUDY/react3

리액트에서 줄바꿈 처리하는 방법 - CSS white-space 속성 쓰기 리액트에서 줄바꿈 처리하는 방법 - CSS `white-space` 속성 쓰기리액트로 개발하다 보면 텍스트 부분에서 줄바꿈이 제대로 안 돼서 열받잖슴?줄 바꿈 넣겠다고 \n넣고 해도 적용이 안됨...근데 해결법 간단함. 그거 `white-space` 속성 하나면 됨. 문제 상황 예를 들어, 우리 데이터가 이렇게 있다고 치자:const projectslist = [ { id: 1, type: "team", title: "GROW UP", description: "화면이나 캠을 공유하며 다른 사람과 함께 공부할 수 있는 웹 사이트입니다.", descriptionDetail: `GROWUP은 화면이나 캠을 공유하며 다른 사람과 함께 공부할 수 있는 웹 커뮤니티 사이트입니다.\n .. 2024. 5. 27.
[react-fullpage] 리액트 화면 딱맞게 스크롤 되는거 새로고침문제 https://www.npmjs.com/package/react-fullpage react-fullpage An implementation of fullpage.js in react based on react-fullpage. Latest version: 0.1.19, last published: 6 years ago. Start using react-fullpage in your project by running `npm i react-fullpage`. There are 3 other projects in the npm registry using react www.npmjs.com 웹 사이트에서 스크롤 했을때 딱 맞게 스르륵 스크롤되는걸 fullpage, onepage라고 한다.. 직접 구현하기 귀찮.. 2024. 4. 17.
Recoil을 이용해서 쉽게 상태관리를 해보자 Recoil 이란? 리코일은 2020년 Facebook에서 발표한 상태관리 라이브러리다. React만으로는 복잡한 상태관리가 어렵기 때문에 별도의 라이브러리를 사용 ex) Redux, Recoil, Zustand, Mobx ...등 Recoil과 다른 상태관리 방법 비교 1. React useState 부모 컴포넌트에서 prop drilling > 불편 공통 prop가 변경될 때마다 계속 re-rendering이 일어남 2. React useContext 상태 마다 Context Provider를 선언해야함 상태 변경될때마다 캐싱 없이 매번 re-rendering이 일어남 3.Redux 전역상태를 수정하기 위해 반드시 액션을 선언해서 수행해야해 데이터의 흐름 예측이 쉬움 좋은 개발자 도구가 있어서 문제 .. 2024. 3. 8.