일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 데이터분석
- programming language
- 딥러닝
- 주니어에서시니어로
- 티스토리챌린지
- 채소마켓
- 이커머스고객이탈예측
- 코딩교육
- JWT
- 스파르타코딩클럽 #항해99파트1기 #bootstrap
- 항해99
- Weekly회고
- javascript
- wil
- React
- 슈퍼코딩
- 인턴교육
- 프로그래머스
- 객채
- 입학시험 #난이도높음
- 액세스토큰
- 개발공부
- 메타코드
- 프리온보딩
- 오늘공부
- 취업연계
- metacode
- 오블완
- 취업준비 #추석연휴 #꿈
- 백엔드
- Today
- Total
하루를 끝내며 다짐하기
State, Props, Condition for re-rendering 본문
이번주에는 State,Props와 리랜더링이 되기위한 조건에 대한 글을 써보았다.
이번주 숙련주차를 들어가면서 여러가지를 알 수 있었는데 그중에서 3가지를 일단 정리해보려합니다.
React를 사용하는 개발자라면, state와 props의 개념에 익숙할 것입니다.
이러한 개념들은 동적이고 상호작용하는 애플리케이션을 구축하는 데 필수적입니다.
이번 글에서는 이 두 개념이 어떻게 함께 작동하여 컴포넌트의 다시 렌더링을 트리거하고,
이 과정에서 조건이 어떤 역할을 하는지에 대해 알아봅시다.
우선, state와 props가 무엇인지 정의해보겠습니다.
State는 컴포넌트의 내부 데이터를 나타내며, `setState()` 메서드를 사용하여 업데이트할 수 있습니다.
const [state, setstate] = useState();
Props는 반면에 부모 컴포넌트에서 전달된 컴포넌트의 입력값입니다.
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
Props는 자식 컴포넌트에서 업데이트할 수 없습니다.
import React from 'react';
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting name="John" />
</div>
);
}
export default App;
그렇다면 이 두 개념은 언제 컴포넌트의 다시 렌더링을 트리거할까요?
이에 대한 답은 React 컴포넌트의 라이프사이클 메서드에 있습니다.
컴포넌트의 state나 props가 변경될 때마다, React는 자동으로 `render()` 메서드를
호출하여 새로운 변경사항으로 DOM을 업데이트합니다. 이를 다시 렌더링이라고 합니다.
하지만 어떤 조건에서만 컴포넌트를 다시 렌더링하고 싶다면 어떻게 해야 할까요? 이때 조건문을 사용하여 컴포넌트를 제어할 수 있습니다. 예를 들어, `shouldComponentUpdate()` 메서드를 사용하여 현재의 props와 state가 이전의 props와 state와 다른지 확인할 수 있습니다. 만약 같지 않다면, 다시 렌더링이 필요합니다.
아래는 state, props, 조건문을 사용하여 다시 렌더링을 트리거하는 예제입니다:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick() {
this.setState({count: this.state.count + 1});
}
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.handleClick()}>Click me!</button>
</div>
);
}
}
위 예제에서는, 컴포넌트에 `count`라는 state 변수가 있으며, 처음에는 0으로 설정됩니다.
하지만, 버튼을 클릭할 때마다 `handleClick()` 함수가 호출되어 `count` 변수를 1씩 증가시키고,
이로 인해 컴포넌트의 `shouldComponentUpdate()` 메서드가 호출됩니다.
`shouldComponentUpdate()`는 현재의 `count`와 이전의 `count`를 비교하고,
다르다면 다시 렌더링이 필요하다는 것을 알려줍니다.
이를 통해 컴포넌트가 불필요하게 다시 렌더링되지 않도록 제어할 수 있습니다.
이는 성능 향상에 매우 중요합니다.
개발자로서 고려해야할 점
React 개발자라면, 컴포넌트를 만들 때 항상 다시 렌더링이 필요한 경우를 고려해야 합니다.
컴포넌트가 매번 다시 렌더링될 때마다, 애플리케이션의 성능이 저하될 수 있습니다.
따라서 컴포넌트를 최적화하여 불필요한 다시 렌더링을 방지하는 것이 중요합니다. 이를 위해 `shouldComponentUpdate()` 메서드나 React의 불변성 원칙 등을 활용할 수 있습니다.
'Weekly I learned' 카테고리의 다른 글
슈퍼코딩 인턴 훈련: JavaScript 기본 개념 정리 (0) | 2024.10.04 |
---|---|
React Components의 Lifecycle (클래스 vs 함수), React Hooks (0) | 2023.05.11 |
React - Virtual DOM, props, state (0) | 2023.04.20 |
HTTP 요청과 콜백함수란?(What is a Callback Function?) (0) | 2023.04.13 |
What is Es for Javascript?(JavaScript의 ES란?) (0) | 2023.04.09 |