React-icons https://www.npmjs.com/package/react-icons react-icons SVG React icons of popular icon packs using ES6 imports. Latest version: 5.0.1, last published: 12 days ago. Start using react-icons in your project by running `npm i react-icons`. There are 5607 other projects in the npm registry using react-icons. www.npmjs.com React 작업중 쉽게 아이콘을 추가할 수 있는 라이브러리 이다. 위에 첨부된 사이트에서 보이듯 npm i react-ic..
리액트(React), 뷰(Vue), 앵귤러(Angular)는 각각 JavaScript 기반의 프론트엔드 프레임워크 또는 라이브러리로, 모두 웹 애플리케이션을 개발하기 위한 도구로 사용돤다. 하지만 각각은 고유한 특징과 철학을 가지고 있다. 러닝 커브 (Learning Curve) : 학습곡선 리액트: 자유도가 높아 초기 학습 곡선이 다소 높을 수 있다. (시간과 노력이 필요하다.) 뷰: 진입 장벽이 낮아 빠르게 학습할 수 있다. 앵귤러: 기능이 많고 복잡한 특성 때문에 학습 곡선이 다소 가파르다. (기울기가 크다는 의미로 학습 초기에 어려움이 있다.) 문법 및 구조 리액트: JSX(JavaScript XML)라는 문법을 사용하여 컴포넌트를 정의하며, 가상 DOM(Virtual DOM)을 활용하여 성능을 ..
React의 데이트 흐름 React는 기본적으로 데이터 즉. props를 단방향으로 전달한다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. 이는 React의 핵심 개념중 하나인 "단방향 데이터 흐름"을 나타낸다. 부모 컴포넌트에서 자식컴포넌트로 props를 내릴 수 있지만, 자식 컴포넌트에서 직접적으로 부모 컴포넌트의 상태를 변경할 수 없다. 자식 컴포넌트에서 상위 컴포넌트로 데이터를 다시 전달하려면 콜백 함수 또는 이벤트를 사용하여 부모 컴포넌트에서 처리해야 한다. React는 단방향 데이터 바인딩이 되는 이유 결론은 애플리케이션의 상태를 예측 가능하고 디버깅하기 쉽게 만들기 위함이다. 예측 가능한 데이터 흐름: 단방향 데이터 흐름은 데이터의 흐름이 항상 한 방향으로만 이동하도록 한..
React 라이프 사이클 리액트는 컴포넌트단위로 생성되는데, 이 컴포넌트들은 생명주기를 갖고있다. 생성부터 시작하여 업데이트, 소멸 되는 과정을 라이프사이클 이라고 한다. 리액트 v16.3 이전에는 클래스 컴포넌트의 라이프사이클이 메서드로 주로 다뤄졌지만, v16.3 이후부터는 함수 컴포넌트에서도 라이프사이클에 대한 기능이 Hooks를 통해 도입되었다. 함수 컴포넌트 함수형 컴포넌트는 리액트의 함수 컴포넌트 기능과 Hooks를 활용하여 UI를 구성하는 방식이다. 함수컴포넌트 예시코드 import React, { useState } from 'react'; function FunctionalComponent() { const [count, setCount] = useState(0); return ( Cou..
💬 들어가며 프로젝트를 진행하며 뒤로가기 기능을 만들다가 눈치챈 부분 useHistory가 사라진 점. 그것을 대체하는 방법을 갖고왔다. 💡 문제 해결 간단 그 자체이다. 기존에 사용하였던 react-router-dom 의 useHistory가 아닌 window의 history를 사용하면 된다. const handleGoBack = () => { window.history.back(); }; 이렇게 사용하면 window에 내장되어있는 history를 이용하여 바로 전의 페이지로 이동할 수 있다. 버튼내부 내용 이런식으로 버튼에 onClick을 걸고 함수를 실행시키면 뒤로가기가 정상적으로 작동하는 모습을 볼 수 있다.
💬 들어가며 이제는 공부하고 정리했던 자료를 확인할 때, 노션, 한글파일보다 블로그에 먼저 들어온다. 오랜만에 환경구성부터 해볼려고하니 헷갈리는게 생각보다 있어 조금씩 정리해보려 한다!! CRA 설치 CRA는 설치하고 사용하기 굉장히 편리하다. npx create-react-app 프로젝트이름 을 적으면 현재 폴더 아래에 프로젝트 CRA 프로젝트 파일이 생긴다. 그럼 이런식의 폴더와 파일들이 구성된 것을 확인 할 수 있다. 오늘은 많은 작업을 하지 않고 필요한 화면만 구성할 것이다. 이전에 해봤던 것 처럼 react-router를 이용하여 page들을 관리할 생각이다. src 파일 정리 그러기 위해선 먼저 필요없는 파일들을 지워볼 예정이다. App.css , App.js, index.css, index...
useCallback과 useMemo의 차이점 결론 부터 말하자면 useCallback과 useMemo는 모두 컴포넌트를 최적화하기 위해 사용하는 Hook 이다. 차이점은 useCallback은 함수를 캐싱하고, useMemo는 결과값을 캐싱한다. useCallback useCallback은 함수를 기억하는 Hook으로 2개의 인자를 받는다. 첫번째 인자는 새로만들 함수의 내용이 들어오고, 두번째 인자는 함수가 의존하는 값이 들어있는 배열이 들어온다. 두번째 인자가 변경되지 않으면 기존의 함수를 재사용하게 된다. 예를 들어 다음과 같은 코드가 있다. function Example({ onClick }) { const handleClick = () => { console.log('button clicked..
❓ 문제 상황 react 프로젝트 진행중 게시판의 게시글이 많아질수록 스크롤이 많아지고 가독성이 떨어지는 문제점을 해결하기 위해 pagination을 사용하기로 했다. 💡 문제 해결 현재 우리 프로젝트의 코드는 게시글들을 firebase에서 받아온 데이터들을 props로 받아 map을 이용해 넘겨주는 함수와 그것들을 인자로 받아 랜더링 시켜주는 함수가 있다. 여기서 처음 contents를 props로 받고, map을 이용해 다른 함수로 넘겨주기 전에 pagination을 이용해야 한다. 이해를 돕기위해 코드를 추가하면 function BoardItem({ title, content, id, like }) { return ( {title} {content} {like} ); } 해당 코드로 넘겨주기 전에 ..
🎉결과물 우리동네 어린이집 우리동네 어린이집 udon-house.netlify.app 개발 기간: 2023. 03. 09 ~ 2022. 03. 28 GitHub url : https://github.com/kindergarten-udon/udon-house GitHub - kindergarten-udon/udon-house Contribute to kindergarten-udon/udon-house development by creating an account on GitHub. github.com 📍프로젝트 과정 프로젝트의 시작 멋사 4기를 진행하며 한번도 같은 팀원으로 만나보지 못했던 분들로 구성되었다. 멋사 운영진분들 어쩜이리 짤때마다 한번도 안본분들을… 이렇게 잘 섞지..? JavaScript 자..
💬 들어가며 이전에 개념을 정리했던 Redux, MVC등의 글을 한번 보고가면 좋을 듯 하다. https://strap.tistory.com/58 (MVC, Flux, Redux) 애플리케이션 상태관리 MVC (Model - View - Controller) 소프트웨어 개발에서 많이 사용되는 소프트웨어 디자인 패턴중 하나로, 애플리케이션의 구성 요소를 세가지 역할로 나누어 관리함으로써 개발의 유지보수성과 확작성 strap.tistory.com 오늘 공부할 부분은 recoil 이지만 한번더 간단하게 Redux에 대해 이야기해보면, Redux는 전역 상태관리를 도와주는 라이브러리로 오늘날 Recoil에 비해 월등히 많은 개발자가 사용한다. 최근 Recoil도 많은 개발자가 사용하는 추세이지만 아직 비교가 안..