[React] memoization

리렌더링의 발생 조건1) 컴포넌트에서 state가 바뀌었을 때2) 컴포넌트가 내려받은 props가 변경됐을 때3) 부모 컴포넌트가 리렌더링된 경우 모든 자식 컴포넌트도 리렌더링  잦은 리렌더링이 좋지 않은 이유1) UX 관점에서 계속해서 바뀌는 화면을 보는 것은 사용자에게 좋지 않음2) 비용이 발생하는 작업을 줄여 최적화해야 함- memo: 컴포넌트를 캐싱- useCallback: 함수를 캐싱- useMemo: 값을 캐싱  React.memomemo부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 모두 리렌더링 됨변화가 없는 자식 컴포넌트는 리렌더링되지 않게 하기 위해서 memo를 사용할 수 있음 예제function App() { const [count, setCount] = useState(0); con..

• format_list_bulleted React
• · 2024. 8. 17.
• textsms

[React] useContext

React Context의 필요성prop drilling이 깊게 일어날수록 문제가 일어난 부분을 찾기 어렵고, 어떤 에러가 생길지 파악하기 어렵다!따라서 hook을 통해 쉽게 전역 데이터를 관리하기 위해 사용한다 context API 필수 개념1) createContext: context를 생성2) useContext: context를 구독, 해당 context의 현재 값을 읽음3) Provider: context를 하위 컴포넌트에 전달  사용 예제✔︎ Grandfather 컴포넌트에서 Father 컴포넌트를 거치지 않고 Child 컴포넌트로 houseName, pocketMoney를 전달하고 싶음 1) context 폴더와 사용할 context.js 생성, createContext + 공유할 값을 내려..

• format_list_bulleted React
• · 2024. 8. 16.
• textsms

[React] useRef

언제 사용할까?특정 값을 저장하기 위해 사용Ref가 변경된다고해서 리렌더링이 일어나지 않는다. (state와 차이) 사용법1) useRef import 2) useRef 사용해 초기값 지정function App() { const ref = useRef("초기값"); console.log("ref: ", ref);}current라는 key에 값이 저장돼있는 것을 확인할 수 있다! 3) 값 변경하기function App() { const ref = useRef("초기값"); console.log("ref: ", ref); ref.current = "바꾼 값"; console.log("ref: ", ref);}ref의 current에 접근해 값을 바꿔준다   사용 예제✔︎ 아이디, 비밀번호 inpu..

• format_list_bulleted React
• · 2024. 8. 16.
• textsms

[React] useState

함수형 업데이트state의 값을 업데이트하기 위해 setState에 직접 수정할 값을 전달해줄 수도 있지만, 함수의 반환값을 이용할 수도 있다!const [count, setCount] = useState(0);const handleCountPlus = () => { setCount((현재값) => { return 현재값 + 1; });}; 값을 대입하는 방식과의 차이const [count, setCount] = useState(0); { // 값을 대입하는 경우 setCount(count + 1); setCount(count + 1); setCount(count + 1); // 함수를 사용하는 경우 setCount(prev => prev + 1); setCount(prev =>..

• format_list_bulleted React
• · 2024. 8. 16.
• textsms

[React] styled-component

리액트에서 스타일을 지정하는 방법1) 인라인 2) css 파일 작성 후 import 3) CSS in JS- JS로 CSS를 구현하는 것- 조건에따라 스타일 적용하거나 로직을 적용하는 것이 가능해짐- styled-component는 이를 위한 도구!  styled-component1) yarn을 이용해 styled-components 설치yarn add styled-components 2) vscode에서 확장 설치 3) 사용할 jsx 파일에서 import styledimport styled from "styled-components"; 4) 스타일된 컴포넌트 만들기const StyledBox = styled.div` width: 100px; height: 100px; border: 1px soli..

• format_list_bulleted React
• · 2024. 8. 16.
• textsms

[React] 리액트의 개념과 성능 최적화 팁

요즘IT 아티클(알아두면 유용한 '리액트' 개념과 성능 최적화 팁) 기반 정리글 입니다. 리액트의 기본 개념컴포넌트 기반 아케텍처웹 애플리케이션의 복잡한 UI를 재사용 가능한 작은 단위로 분할하는 방식각 컴포넌트는 상태와 속성을 갖고있음관심사를 분리 / UI를 계층적으로 구조화하여 가독성을 높임 / 유지보수를 용이하게 함 유의할 부분- 구성요소간 의존성을 최소화- 각 컴포넌트는 한가지 책임만 진다 (단일 책임 원칙)- 다른 개발자도 컴포넌트를 이해하고 사용하기 쉽도록 속성과 반환값을 일관되게 작성해야 함 JSX 문법HTML과 유사한, 자바스크립트를 확장한 문법컴포넌트 렌더링 로직과 마크업을 한 곳에서 관리할 수 있음 유의할 점- 모든 태그는 반드시 닫혀 있어야 함- 최상위 요소는 하나여야 함- 카멜케이스..

• format_list_bulleted React
• · 2024. 8. 14.
• textsms