[복습] 리액트 학습일지 [1] (모던 리액트)

* 컴포넌트가 리렌더링하는 타이밍

1. State 가 업데이트 된 경우
2. 전달받는 Props 가 변경된 경우
3. 부모 컴포넌트가 리렌더링된 경우

리렌더링 되더라도 State의 초기화는 생성시에 한 번만 수행된다.

* 리액트 디벨로퍼 툴

React Developer Tools 는 크롬, 엣지 등의 브라우저에서 다운 받아 사용할 수 있는 확장프로그램이다. 컴포넌트트리와 실행시간, 부하측정 등에 유용하게 사용된다.

* 배열의 map 함수를 통하여 새로운 배열을 반환할 때에 새로운 배열의 각 반환 요소는 key 값을 가지고 있어야 한다.

myArray.map((elem, idx)=>{
  <React.Fragment key={elem.unique_key}>
    ...
  </React.Fragment>
});

단순히 map 함수의 인자로 전달되는 index 를 key 값으로 사용하는 것은 매우 좋지 않다. key 는 고유한 값을 가져야 하기 때문이다. 참고로 key 값은 map 메서드의 내부에서만 고유하면 되며, 다른 배열의 key 와는 겹쳐도 상관없다. 즉, 동일한 배열 내의 요소들 사이에서 key 가 중복되지만 않으면 된다.

• key 값으로 고유한 값을 할당하는 방법
  1) 데이터 자체의 정보로부터 key 를 생성
  2) Date.Now() 함수와 데이터를 섞어서 key 를 생성
  3) uuid 라이브러리를 이용하여 key 를 생성

/* 터미널에서 라이브러리 설치 */
npm install uuid  

/* 터미널에서 라이브러리 설치 */
import { v4 as uuidv4 } from 'uuid';
uuidv4();  // '971dea4d-3b7d-4bad-9bdd-2b0h7b3dc26d'

* if 구문의 삽입

if 구문을 직접 JSX 식에 삽입할 수 없기 때문에, 즉시함수를 이용해서 JSX 식에 삽입할 수 있다.

export default function MyComponent() {
	return(
      <>
      	{ 
          (()=>{
      		if(/*조건식*/)
               return <p> O </p>
            else
               return <p> X </p>
    	  })() /*즉시실행*/
        }
      </>
    )
}

* 간단한 조건분기 연산자

1) isActive ? 참일 때 : 거짓일 때
2) isActive && 참일 때 // isActive 가 참일 때에만 처리
3) isActive || 거짓일 때 // isActive 가 거짓일 때에만 처리

* classnames 라이브러리의 활용

className 속성에 공백을 활용하여 고정스타일과 선택스타일을 섞어서 사용할 때에 스타일 클래스 이름을 나열하기 쉽도록 도와준다.

/*기존*/
<div className="box light"></div>

/*라이브러리 활용*/
npm install classnames

import cn from 'classnames';
<div className={cn('box', 'light')}></div>

* 꾸미기 컴포넌트의 활용법

대상 컴포넌트를 꾸미기 컴포넌트로 감싸서 대상 컴포넌트를 특정한 방식으로 꾸미거나 조작할 수 있다.

/* StyledComponent.js */
export default function StyledComponent( {children} ) {
	return(
      <div style={padding: 10, border:'1px solid #111'}>
  		{children}
      </div>
    );
}

/* MyComponent.js */
import StyledComponent from './StyledComponent.js'

export default function MyComponent() {
	return(
      <StyledComponent>
      	<p>이 문장은 꾸며지게 됩니다.</p>
      </StyledComponent>
    );
}

* children 에 매개변수 전달하기

/* ListTemplate.js */
export default function ListTemplate( {arr, children} ) {
	return(
      <div style={padding: 10, border:'1px solid #111'}>
  		{
  			arr.map( (elem) => {
              <React.Fragment key={elem.id}>
                {children(elem.value)}
              </React.Fragment>
            }
        }
      </div>
    );
}

/* MyComponent.js */
import ListTemplate from './ListTemplate.js'

export default function MyComponent() {
	return(
      <ListTemplate arr={myArrayData}>
  		{
  			/* children 을 함수로 만든다. */
  			/* 이 함수에서 반환하는 대상이 children 이 된다. */
  			/* 함수이기 때문에 매개변수 전달하는 것이 자유롭다. */
  			(value) => {
              <p> 반환되어 children 이 된다. </p>
              <p> {value} 값의 전달도 자유롭다. </p>
            }
		}
      </ListTemplate>
    );
}

• 참고할 내용 렌더프롭 Render Props