React

State

리액트에서는 변수 대신에 state를 사용하는데
let [data, setData] = useState('data1');
와 같은 방식을 사용한다.
여기서 data에는 값이, setData에는 data를 변경하기 위한 함수가 들어간다.
state를 사용하는 이유는, 데이터가 변경되고 난 후, 재 랜더링을 해주기 위함이다.

• 자주 변경되는 값은 state로, 변경이 일어나지 않을것 같은 데이터는 일반 변수로 사용한다.
• state변수는 반드시 setState를 통해서만 변경할 수 있다.

state가 array 또는 object일 때

• spread 문법을 이용해 데이터를 복제한다.
• 복제한 데이터를 변경한다.
• 변경한 데이터를 setState를 이용해 랜더링해준다.

object와 array는, stack영역에서 같은 주소를 나타내기 때문에, 얕은복사를 이용하면 데이터를 변경하는데 어려움이 있을 수 있다. 따라서 spread문법과 같은 깊은 복사를 해주고 setState를 해주어야한다.

Component

• JSX에서 사용하는 HTML코드가 길어질수록 복잡해진다. 이를 위해 HTML 문법을 한 단위로 묶어주는 기능을 하는것이 컴포넌트다.
• 컴포넌트는 함수를 사용하는 방식과 유사하게 사용한다.
• 함수를 만들고, 호출하는 방식과 같이 컴포넌트를 만들고 호출할 수 있다.
• Typescript에서 타입은 일반적으로 React.FC이다.

Component의 단점

• 컴포넌트는 모듈화를 할수 있다는 장점이 있지만, 컴포넌트를 많이 사용할 수록 state변수를 공유하기가 어려워진다.
• 함수 간에도 데이터를 기본적으로 공유할 수 없듯이 컴포넌트에서도 그렇다. 따라서 꼭 필요한 경우에만 컴포넌트로 분리하는 것이 좋다