본문 바로가기

Front-End54

메모이제이션 리액트는 상위 컴포넌트의 sate가 업데이트가 되면 그 하위 컴포넌트까지 제렌더링 된다.함수가 다시 호출되고, 값을 다시 부른다는 뜻이다.이렇게 되면 에너지 낭비이기 때문에 리액트에선 3가지 훅을 제공한다.이 3가지 훅은 값이나 함수를 메모리에 저장해 자원을 아낄 수 있다. useCallback(함수),useMemo(값),useReducer 각각 하나씩 살펴보겠다. useCallback 두가지 인자를 받는다.1.메모이제이션2.의존성 배열의존성 배열의 값이 변경되지 않는 한 , 동일한 함수 인스턴스를 반환한다.  사용방법const 변수선언 = useCallback(()=>{},[])const increment = useCallback(()->{ //이 함수 내부에서 발생하는 일이 //굉장히 비용이 많이 발.. 2024. 7. 26.
리액트 불변성 State나 props 같은 데이터를 변경할 때 ,기존 데이터를 직접 수정하지 않고 새로운 데이터를 생성하여 대체하는 것  불변성을 지켜야 하는 이유 - 가상 DOM의 효율성 - 이전상태 , 현재상태를 쉽게 비교해 변경 된 부분만 찾아내고 , 최소한의 DOM 조작이 가능하다. - 예측 가능성 :  상태 변화를 추적하기 쉽고 어떤 부분이 변경되었는지 파악하기 쉽다. - 데이터 흐름 단순화 :  데이터 흐름이 단순해지기에 앱의 안정성을 높일 수 있다.  지키는 방법1.객체나 배열을 직접 수정하지 않기새로운 객체를 생성하여 값을 복사 , 변경해야 할 부분만 수정한다.스프레드 연산자를 사용해 기존 객체를 복사하고 , 변경할 부분을 추가하거나 수정한다. 2.불변성을 보장하는 함수 사용map , filter , r.. 2024. 7. 25.
코드분석(To-do-list) 오늘은 To-do-list를 만들어봤다. 투두리스트는 기본기(CRUD)에 정말 좋은 예제라고 생각한다. 어떤 기능인지 살펴보면 ,인풋창에 데이터를 입력하고 버튼을 누르면 밑에 목록이 생기고 ,체크를 하면 밑줄이 처진다.X를 누르면 해당 컴포넌트가 삭제된 것처럼 보이는 기능이다. (현재 서버 없이 혼자 만드는 것이기 때문에 API에 요청을 보내진 않는다.)  전체적으로 보겠다.투두 리스트를 담은 배열 안에,정보들이 담긴 객체가 한덩이 한덩이 있어야 한다.객체 안엔 {id,text , checked}의 앖이 들어가야 한다.그러니까 최종으로 보면 이런 느낌이다. [ {id : 유니크한 값, text : 내가 쓴 내용, isCompleted : true & false} , {id : 유니크한 값, text .. 2024. 7. 24.
조건부 렌더링 조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것if문 , 삼항 연산자 , 논리 연산자(&&) if문 if (isLoggedin) { return 로그인 성공; } return ( 실패! );} 삼항 연산자 true false에 따라 결과를 다르게 보여주는 것export default function App() { const isLoggedin = false; return {isLoggedin ? "로그인 성공" : "로그인 실패"};}  논리연산자(&&)해당 조건이 참일때만 보여주는 것export default function App() { const isLoggedin = false; return {isLoggedin && "로그인 성공" };} 2024. 7. 24.
구조분해할당(Destructuring) {...rest} 비구조화할당이라고도 불린다. 구조분해 할당 정의"구조화된 배열을 파괴해 1개 이상의 변수에 할당하는 방법" 두가지를 주로 쓰게 될 것이다.1. 받은 값의 이름 그대로 현재 컴포넌트의 변수로 저장2. [...rest],{...rest}   예를 들어 유저정보를 api로 받는다고 하자.근데 값이 뭐가 들어오는지 , 서버에서 딱히 정의가 되지 않았다면?타입명시를 제대로 못할 때 쓰는 팁이다.  1. 받은 이름 그대로 변수저장하기1. 객체const obj = {name : Alice , age : 30 ,email: 'alice@example.com'}//이게 구조분해할당const{name, age , email} = objconsole.log(name) //Aliceconsole.log(age) //30con.. 2024. 7. 24.
children props는 값을 내려주는 건데, 칠드런은 뭐하는 놈인가..props만 있으면 되는거 아닌가? 라고 생각을 했다. 말그대로 자식이라 생각하면 편하다. app.tsx내에서 , props는 내려주면   이렇게 썼다. children은 (자식)   이 사이에 있는 자식이 ! (자식) = 어떤 것이던 다 해당 컴포넌트로 내려준다는 거다. 예제를 보겠다.//Container.tsx (Children 컴포넌트)import { ReactNode } from "react";interface TChildren { children: ReactNode; id: string;}export default function Container({ children, id }: TChildren) { return ( .. 2024. 7. 23.

티스토리툴바