반응형 개발/React54 jsx의 const 변수를 컴포넌트로 변환하려 성능최적화 하는 아티클 https://ykss.netlify.app/translation/500ms-to-1.7ms-in-react:-a-journey-and-a-checklist/#%EB%8B%A8%EA%B3%84-3---jsx%EC%9D%98-const-%EB%B3%80%EC%88%98%EB%A5%BC-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EB%B3%80%ED%99%98 (번역) 리액트 성능 최적화, 500ms 에서 1.7ms 까지 : 그 여정과 체크리스트원문: 500ms to 1.7ms In React: A Journey And A Checklist 이 글은 중국어로도 번역되어 있습니다. (by Qlly) Link1 Link2 모든 앱에서, 그리고 모든 개발자의 특정 개발 단.. 2024. 6. 7. 함수 컴포넌트와 클래스 컴포넌트 클래스 컴포넌트 함수 컴포넌트 리액트 컴포넌트의 라이프사이클은 크게 마운트, 업데이트, 언마운트로 나뉜다. 클래스 컴포넌트에서는 각 주기에 실행될 코드를 메소드를 통해 작성한다. 마운트 된 직후에 호출되는 componentDidMount(), 네트워크 요청을 보내기에 적절함 갱신이 일어난 직후에 호출되는 componentDidUpdate 컴포넌트가 마운트 해제되어 제거되기 직전에 호출되는 componentWillUnmount(), 타이머 제거, 네트워크 요청 취소, 생성된 구독 취소 등을 작성 이러한 방식은 재사용을 위한 코드 작성시에 코드의 양을 길어지게 했고, 버그 방지를 위해 개발자가 신경써야 할 부분이 너무 많았다. 함수 컴포넌트에서는 위 라이프사이클 메소드가 useEffect 안에 추상화되면서 .. 2024. 1. 11. JSX Element React Element ReactNode 차이 JSX Element, React Element, ReactNode 먼저 JSX가 createElement로 변환되는 것을 한번 보자 return hi; 위 JSX 코드는 다음과 같이 변환된다. return React.createElement('div', null, 'hi'); JSX Element와 React Element의 관계 JSX문법으로 적는 return hi는 react와 컴파일러에 의해 JS인 createElement로 변환된다. 이 createElement를 통해 생성되는 element가 바로 가상돔의 표현방식인 React Element이다. 실제로 타입을 보았을때는 JSX Element가 React Element보다 조금 더 유연한 방식이다 정도로만 느껴진다. 이 타입은 React El.. 2024. 1. 8. 객체를 state로 이용할 때는 readonly로 직접 변경 못하게 막기 리렌더링 방지를 하는게 아니라면 아래와 같은 코드는 쓰지 않는게 좋다.(리렌더링 방지를 원한다면 useRef가 적합하다) const [application, setApplication] = useState({ name: "june", product: "SEB", }); // application을 직접 변경하는 것은 리렌더링을 일으키지 않음 application.name = "seung"; 코딩단계에서 막을 수 있게 타입스크립트로 타입가드를 하자. readonly를 이용해서 직접 변경을 막은 코드이다. interface ApplicationType { readonly name: string; readonly product: string; } const [application, setApplication].. 2024. 1. 7. 이전 1 2 3 4 ··· 14 다음 반응형
