React Component
- Reacto Component에서는 UI 데이터를 속성값이나 상태값으로 관리해야 한다
상태 값 사용
export default function App() {
onClick = () => (color = "blue");
return(
<button style={backgroundColor : color} onClick ={onClick}>버튼</button>
)
}
- 이벤트 핸들러가 존재하지만, 클릭해도 아무런 변화가 일어나지 않는다. background 색상은 변경되었지만, 리액트에서 이 값이 변경되었다는 사실을 모르기 때문에 리렌더링을 진행하지 않기 때문이다.
- 리액트에게 상태값을 알려주려면, color를 컴포넌트의 상태로 만들어 줘야 한다.
export default function App() {
const [color, setColor] = useState("red")
const onClick = () => setColor("blue")
return (
<button style={backgroundColor : color} onClick ={onClick}>
버튼
</button>
)
}
속성 값 사용
export default Title = ({ titleId, titleName }) => {
return <p>{titleName}</p>;
};
- 부모 컴포넌트에서 Title이라는 컴포넌트를 사용할 것이다.
- 부모 컴포넌트에서는 Title 컴포넌트에 속성 값을 넘겨준다.
- 부모 컴포넌트의 변화에 의해 Title 컴포넌트에 다른 속성 값을 넘겨주게되면 React는 리렌더링을 한다.
- 부모 컴포넌트가 렌더링 될 때마다 자식 컴포넌트들 모두가 리 렌더링 된다.
속성 값이 변경되지 않은 자식 컴포넌트들이 다시 렌더링 되는 것은 매우 불필요하다. 따라서, 속성값이 변경될 때만 리렌더링을 하게 만드려면
React.memo를 사용하면 된다.
```jsx
const Title = ({ titleId, titleName }) => {
return <p>{titleName}</p>;
};
export default React.memo(Title);
```
컴포넌트 특징
-
<Title>컴포넌트를 여러개 사용할 수 있다. -
같은 컴포넌트라고 하더라도, 각 컴포넌트는 상태 값을 위한 자신만의 메모리 공간이 있어, 자신만의 상태 값이 존재하게 된다.
-
속성 값은 불변 변수다. 그러나 상태값은 불변 변수가 아니다. 하지만 상태값도 불변변수로 관리하는 것이 좋다.
-
변수의 값을 바꿀 수 없다는 것이 불변 변수다.
-
속성 값은 불변 변수이기 때문에 값을 변경하려고 하면 에러가 발생한다.
-
상태 값도 불변 변수처럼 다루는 것이 좋다. 만약 상태가 객체일 때, 프로퍼티의 값을 바꾸면 리액트는 상태 변화를 감지하지 못한다., 객체를 담은 변수는 참조 값만을 들고 있기 때문이다. 따라서 불변 객체처럼, 내부 값을 바꾸는 것이 아니라. 바꾼 값을 들고 있는 새로운 객체를 상태로 바꿔줘야 한다.
-
...전개 연산자를 사용해서 쉽게 쉽게const Test = () => { const [color, setColor] = useState({ nowColor: "red", prevColor: "blue", }); const onClick = () => setColor({ ...color, nowColor: "black" }); return ~~~ };
-
-
