중요하지만 헷갈리는 리액트 개념 이해하기
UI라이브러리인 리액트는 UI 데이터를 관리하는 방법을 제공한다.
컴포넌트 내부에서 관리하는 상태값과 부모 컴포넌트에서 내려주는 속성값으로 구성된다.
리액트를 사용하지 않으면 복잡하게 코드가 써지고 가독성 조차 좋지 않다.
그리고 구체적이기 때문에 돔 환경이 아닌 곳에서는 사용하기 힘들다.
상태값을 관리하는 리액트를 사용하면 쉽게 코드를 쓸수 있어 다양한 방식으로 그릴수 있다.
1. 상탯값과 속성값으로 관리하는 UI 데이터
리액트는 상태값을 state로 관리를 하고 setState()함수를 이용해서 변경해준다.
속성값은 부모 컴포넌트가 전달해 주는 데이터이고, 대부분의 경우 UI데이터를 포함한다.
상태값은 state 값이다
함수형 컴포넌트에 상태값을 추가할때는 useState 훅을 사용한다. 훅의 인자는 초기값을의미한다..
useState가 반환하는 배열의 첫번째 원소는 상태값이고 두번째 원소는 상태값 변경 함수이다.
훅에서는 배열 비구조화 문법을 자주 사용한다
Const [상태값,상탯값변경함수] = useState(초기값);이렇게 상태값과 속성값으로.UI데이터를 관리하는 것이 리액트의 핵심이다.
속성값을 받은 자식 컴포넌트는 부모 컴포넌트가 렌더링 될때마다 같이 렌더링된다. 만약 자식 속성값이 변경될 때만 렌더링 되길 원한다면 React.memo , React.PureComponent를 이용할수 있다.
함수형은 React.memo를 사용하고 클래스형은 React.PureComponent를 사용한다.
React.momo사용
Function Title(props) {
Return <p>{props.title}</p>;}
Export default React.memo(Title) ; 함수의 인자로 함수형 컴포넌트를 입력하면 , 컴포넌트의 상태값이나 속성값이 변경되는 경우에만 렌더링 된다.
React.PureComponent 사용
Export default class Title extends React.PureComponent{
render(){
Return <p>{props.title}</p>;}}이것도 마찬가지이다.
클래스형 컴포넌트는 리액트 내부에서 인스턴스로 존재한다. 각 인스턴스는 자신만의 메모리 공간을 가지고 있기 때문에 같은 컴포넌트라고 하더라도 자신만의 상태값이 존재한다.
각 컴포넌트는 상태값을 위한 자신만의 메모리 공간이 있어서 같은 컴포넌트라도 자신만의 상태값이 존재한다.
같은 컴포넌트를 여러번 재사용하는데 각각의 컴포넌트 내에서 함수가 따로 존재해서 index를 받아오거나 각각 다른 것을 실행할때 좋다.
컴포넌트 함수의 반환값
1. HTML에 정의된 거의 모든 태그
2. 문자열과 숫자
3. 배열, (단 각 리액트 요소는 key속성값을 가지고 있어야 한다)
4. 프래그먼트(fragment)를 사용하면 배열을 사용하지않고 여러개의 요소를 표현가능하다
<>
<p>dd</p>
</> - Null,불리언 값을 밚환하면 아무것도 렌더링 하지 않는다.
Return ReactDOM.createPortal(<p>dd</p>,domNode);리액트 포털을 사용하면 컴포넌트의 현재 위치와는 상관없이 특정 돔 요소에 렌더링 할수 있다.
불리언 값은 조건부 렌더링, 삼항연산자 등에서 사용할수 있다.
ReactDOM.createPortal
Function Modal({title,desc}) {
Const domNode = document.getElementBuId(‘modal’);
Return ReactDOM.createPortal(
<div>
<p>{title}</p>
<p>{desc}</p>
</div>,
domNode,
);
}리액트 포털을 이용해서 트정 돔 요소에 리액트 요소를 렌더링 할 수 있다.
Modal컴포넌트가 사용된 위치와 상관없이 렌더링할 위치를 선택할수 있다.
