반응형
- Creative Commons
- 저작자표시 - 적절한 출처와, 해당 라이센스 링크를 표시하고, 변경이 있는 경우 공지해야 합니다. 합리적인 방식으로 이렇게 하면 되지만, 이용 허락권자가 귀하에게 권리를 부여한다거나 귀하의 사용을 허가한다는 내용을 나타내서는 안 됩니다.
- 비영리 - 이 저작물은 영리 목적으로 이용할 수 없습니다.
- 변경금지 - 이 저작물을 리믹스, 변형하거나 2차적 저작물을 작성하였을 경우 그 결과물을 공유할 수 없습니다.
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
(If this article was helpful, please click the ad once. Thank you. ;)
Mode: Bright; Font: Noto Sans KR; font-size: 16px; line-height: 1.5;
width: 1280, height: 720, version: 3.3.3
Canonical URI: https://kipid.tistory.com/entry/week5-위클리-페이퍼-useMemo-useCallback-에-대해-설명하고-어떤-경우에-사용하면-좋을지-남용할-경우-발생할-수-있는-문제점을-설명-리액트-생명주기-life-cycle-에-대해-설명-React-에서-배열을-렌더링할-때-key-를-설정해야-하는-이유와-key-설정-시-주의할-점을-설명
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/367
document.referrer: Empty
width: 1280, height: 720, version: 3.3.3
Canonical URI: https://kipid.tistory.com/entry/week5-위클리-페이퍼-useMemo-useCallback-에-대해-설명하고-어떤-경우에-사용하면-좋을지-남용할-경우-발생할-수-있는-문제점을-설명-리액트-생명주기-life-cycle-에-대해-설명-React-에서-배열을-렌더링할-때-key-를-설정해야-하는-이유와-key-설정-시-주의할-점을-설명
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/367
document.referrer: Empty
week5 위클리 페이퍼 (useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명, 리액트 생명주기 (life cycle) 에 대해 설명, React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명)
Table of Contents
PH1.Posting History
1.useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명
1.1.useMemo
1.2.useCallback
2.리액트 생명주기 (life cycle) 에 대해 설명
2.1.마운트 (Mounting)
2.2.업데이트 (Updating)
2.3.언마운트 (Unmounting)
2.4.함수형 컴포넌트에서의 생명주기
3.React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명
3.1.Key 설정 시 주의할 점
RRA1.References and Related Articles
T1.useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명
▼ Show/Hide
useMemo 와 useCallback 는 React 에서 성능 최적화를 위해 사용되는 훅입니다. 각각의 역할과 사용법, 그리고 남용 시 발생할 수 있는 문제점을 설명드릴게요.
T1.1.useMemo
useMemo는 계산 비용이 높은 연산의 결과를 메모이제이션하여, 의존성 배열에 넣어준 값이 변경되지 않으면 이전에 계산한 값을 재사용합니다. 주로 다음과 같은 경우에 사용됩니다:
비싼 계산: 복잡한 계산을 반복적으로 수행하는 경우, 이를 최적화하기 위해 사용합니다.
렌더링 최적화: 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지합니다.
사용 예시:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
T1.2.useCallback
useCallback 은 함수를 메모이제이션하여, 의존성 배열에 넣어준 값이 변경되지 않으면 이전에 생성한 함수를 재사용합니다. 주로 다음과 같은 경우에 사용됩니다:
이벤트 핸들러: 자식 컴포넌트에 전달되는 이벤트 핸들러 함수를 최적화합니다.
함수 재사용: 동일한 함수를 반복적으로 생성하는 것을 방지합니다.
사용 예시:
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
남용 시 발생할 수 있는 문제점
복잡성 증가: 불필요하게 사용하면 코드가 복잡해지고 가독성이 떨어질 수 있습니다.
성능 저하: 의존성 배열을 잘못 설정하면 오히려 성능이 저하될 수 있습니다.
디버깅 어려움: 메모이제이션된 값이나 함수가 예상대로 동작하지 않을 경우, 디버깅이 어려울 수 있습니다.
따라서, useMemo와 useCallback는 필요한 경우에만 신중하게 사용하는 것이 좋습니다. 기본적으로는 먼저 동작하는 코드를 작성한 후, 성능 최적화가 필요한 부분에만 적용하는 것이 바람직합니다.
▲ Hide
T2.리액트 생명주기 (life cycle) 에 대해 설명
▼ Show/Hide
리액트 컴포넌트의 생명주기 (life cycle) 는 컴포넌트가 생성되고, 업데이트되고, 제거되는 일련의 과정을 말합니다. 생명주기는 크게 세 가지 단계로 나눌 수 있습니다: 마운트 (Mounting), 업데이트 (Updating), 언마운트 (Unmounting) 입니다.
T2.1.마운트 (Mounting)
컴포넌트가 처음으로 DOM 에 삽입될 때 발생하는 단계입니다. 주요 메서드는 다음과 같습니다:
constructor: 컴포넌트가 생성될 때 호출됩니다.
getDerivedStateFromProps: props 로부터 state 를 설정할 때 사용됩니다.
render: 컴포넌트를 렌더링합니다.
componentDidMount: 컴포넌트가 처음 렌더링된 후 호출됩니다.
T2.2.업데이트 (Updating)
컴포넌트의 props 나 state 가 변경되어 다시 렌더링될 때 발생하는 단계입니다. 주요 메서드는 다음과 같습니다:
getDerivedStateFromProps: props가 변경될 때 호출됩니다.
shouldComponentUpdate: 컴포넌트가 리렌더링될지 여부를 결정합니다.
render: 변경된 내용을 렌더링합니다.
getSnapshotBeforeUpdate: DOM 업데이트 직전에 호출됩니다.
componentDidUpdate: 컴포넌트가 업데이트된 후 호출됩니다.
T2.3.언마운트 (Unmounting)
컴포넌트가 DOM 에서 제거될 때 발생하는 단계입니다. 주요 메서드는 다음과 같습니다:
componentWillUnmount: 컴포넌트가 제거되기 직전에 호출됩니다.
T2.4.함수형 컴포넌트에서의 생명주기
함수형 컴포넌트에서는 클래스형 컴포넌트의 생명주기 메서드를 대신하여 Hook 을 사용합니다:
useEffect: componentDidMount, componentDidUpdate, componentWillUnmount를 대체합니다.
useState: 상태 관리를 위해 사용됩니다.
useRef: DOM 요소에 접근하거나 값을 유지하기 위해 사용됩니다.
리액트 생명주기를 이해하면 컴포넌트의 특정 시점에 원하는 작업을 수행할 수 있어, 더 효율적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.
▲ Hide
T3.React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명
▼ Show/Hide
Key를 설정해야 하는 이유
효율적인 업데이트: React 는 Virtual DOM 을 사용하여 변경된 부분만 업데이트합니다. key 를 사용하면 React 가 각 요소를 고유하게 식별할 수 있어, 어떤 요소가 변경되었는지 빠르게 감지할 수 있습니다.
정확한 UI 유지: key 가 없으면 React 는 요소를 재사용하거나 잘못된 요소를 업데이트할 수 있어, UI 가 예상치 못한 방식으로 동작할 수 있습니다.
T3.1.Key 설정 시 주의할 점
고유한 값 사용: key는 배열 내에서 고유해야 합니다. 일반적으로 데이터의 고유 ID를 사용합니다.
변하지 않는 값 사용: key 값은 변하지 않는 값이어야 합니다. 배열의 인덱스를 key로 사용하는 것은 권장되지 않습니다. 배열의 순서가 변경되면 key 값도 변경되어, 불필요한 재렌더링이 발생할 수 있습니다.
문자열 또는 숫자 사용: key 값으로 문자열이나 숫자를 사용하는 것이 좋습니다. 객체나 함수는 사용할 수 없습니다.
const items = [{ id: 1, name: 'item1' }, { id: 2, name: 'item2' }];
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
이렇게 key 를 올바르게 설정하면 React 가 효율적으로 UI 를 업데이트할 수 있습니다.
▲ Hide
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악, K-Pop MV 들을 광고없이 목록재생 해서 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
츄츄와 루루 (포메라니안 6세/3.5kg, 3개월/1.2kg) 의 사진/동영상들을 모아 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
(If this article was helpful, please click the ad once. Thank you. ;)
반응형
http/https 링크및 수식 (\ [ Outline 수식 \ ],\ ( inline 수식 \ )::\이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는```시작,```/마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다.```[.lang-js.scrollable.no-linenums]같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다. .no-linenums 로 line numbering 을 없앨수도 있습니다.댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.