사용자 정의 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara">자식</Welcome>;
요소를 첫글자를 대문자로 나타낸 형식이며 함께 작성된 attribute 및 자식 elem이 props에 전달

ReactDOM.render()호출 -> Welcome 컴포넌트 호출 -> 컴포넌트 반환 -> DOM 업데이트

state, props

state와 props가 바뀌면 리렌더링이 발생한다.
state는 컴포넌트 내에서 관리되는 상태이며,
props에는 사용자정의 컴포넌트의 attribute와 children(자식요소)가 객체에 담겨있다.

컴포넌트 렌더링 막기

조건에 따라 컴포넌트가 렌더링 되는 것을 막고 싶다면 return null;을 하면 된다.
const Warning = (props) => {
  if(!props.warn) {
  return null;
}}

배열 map 사용시 list key 필요한 이유

기존의 배열요소가 수정되었을 경우 key값을 비교하여 수정된 부분만 리렌더링을 하기 위해 필요.
배열 전체를 리렌더링 할 시 변경되지 않은 부분까지 불필요한 DOM변경이 일어나므로 비효율적.
key를 index로 하게 되면 배열 앞, 중간요소에 삭제 또는 추가가 있을 시 key값 전체가 바뀌므로 하지 말것.
map함수를 컴포넌트화하여 분리할 경우 attribute에 key를 지정할 것.

Hook

최상위 level에서만 호출할 것(반복문, 조건문, 중첩함수에서 호출 x)
React함수 내에서 호출할 것

useEffect

useEffect
useEffect(() => {
// 수행할 일 
 ...
  return () => {} // clean-up
},[deps])
컴포넌트 렌더링 이후, 즉 DOM이 다 그려지고 난 이후에 실행되는 메소드


clean-up 이전의 렌더링에서 파생된 effect 정리
함수 마운트가 해제될 때에 한번이 아닌 모든 리 렌더링 시에 실행

useLayoutEffect

useEffect와 동작은 비슷하지만 DOM이 다 그려지고 난 후가 아닌
화면에 DOM이 그려지면서 동기적으로 실행되는 동작 설정 
useLayoutEffect(() => {}, []);

useState

const [state, setState] = useState(() => {return }) 초기값에 반환값 있는 함수 가능.
setState((prev) => prev + 1) 이전 State값을 인자로 변경가능.

useCallback

useCallback
함수를 캐싱하기 위한 hook
jsx에 함수를 사용하는 경우 렌더링마다 함수가 매번 새로 생성되기 때문에
함수를 캐싱해두고 사용하는 것이 좋다.
렌더링을 막고싶은 경우 사용. deps가 바뀌는 경우에만 새로 캐싱.
const onClick = useCallback(() => {
  // 내부 코드들이 캐싱됨.
  setMessage(true);
}, [deps])

useMemo

값만 캐싱
useMemo(() => 값, [deps]);

useRef

컴포넌트 내부에 변수를 선언하면 리렌더링 시에 값이 초기화 된다.
이 때 useRef를 사용하면 리렌더링 시에도 변경된 데이터가 유지된다.
const data = useRef(0)
접근법 : data.current // 0

useRef로 DOM에 접근하는 방법
const inputEl = useRef(null);

return <input type='text' ref={inputEl} />

useImperativeHandle

자식컴포넌트에서 설정한 ref메서드를 부모컴포넌트에서 사용할 수 있도록 함.
forwardRef와 함께 사용

const App = () => {
const inputRef = useRef(null);

return(
<input type='text' ref={inputRef} onChange={change} />
<FancyInput ref={inputRef}
)}

const FancyInput = forwardRef((props, ref) => {
  const inputRef: any = useRef(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));
  return <input ref={inputRef} />;
});

App 컴포넌트에서 inputRef.current.focus() 사용가능.

code splitting

React.lazy React.Suspense

lazy
컴포넌트를 동적으로 불러올 때 사용
컴포넌트가 무거운 경우 초기 렌더링시간을 단축시킬 수 있다.

Suspense
렌더링이 준비되지 않은 컴포넌트에 대해 로딩 상태를 표시할 수 있다.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback='...loading'>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

dangerouslySetInnerHTML

function createMarkup() {
  return {__html: "content"}
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

xss 공격에 취약하니 주의

참고

https://ko.reactjs.org/