etc | Image, Icon, Input

image

import

바닐라 js에서 import 할 수 있는 파일은 js 파일 뿐이다. 하지만 리액트에서는 css 파일이나, 이미지 파일을 import 할 수 있다. 프로젝트를 배포하면, 우리가 import한 이미지가 어플리케이션에 포함되도록 리액트가 코드를 변환해 주기 때문이다. 

 

import image from '../../assets/meals.jpg' // 확장자 생략 불가능

const image = () => {
  return <img src={image} alt="alt" />
}

 

+) 타입스크립트 리액트에서 이미지를 import 하려면, 프로젝트 폴더 바로 아래에 index.d.ts 파일을 생성하고, tsconfig에 옵션을 추가해 주어야 한다. 

 

// index.d.ts
declare module '*.png';
declare module '*.jpg';

// tsconfig.json
"include": ["src", "index.d.ts"]

onLoad

const Component = (props) => {
  const imageRef = useRef();
  const [isImageLoaded, setImageLoad] = useState(false);
  
  const onLoadHandler = () => {
    if (imageRef.current && imageRef.current.complete) {
      setImageLoad(true);
    }
  };

  useEffect(() => {
    onLoadHandler();
  }, []);

  return (
    <li>
      <h1>이미지가 로딩되기 전에 보여짐</h1>
      <img
        ref={imageRef}
        onLoad={onLoadHandler}
      />
      {isImageLoaded && <p>이미지가 로딩된 전에 보여짐</p>}
    </li>
  );
};

 

1. 컴포넌트 함수는 다른 jsx 코드를 모두 평가한 후에 useEffect의 콜백을 실행한다. 
2. 콜백 함수가 onLoadHandler를 호출하고, 조건을 통과하면 loaded 상태를 true로 변경한다.
3. state가 업데이트 되었으므로 컴포넌트 함수를 재실행한다. 
4. 이제 loaded 상태가 true 이므로 p 태그도 렌더링된다. 

icon

icon library 

how to make reusuable icon component 

input 

const Input = (props) => {
  return (
    <div className={props.className}>
      <label {...props.label}>{props.label.name}</label> // spread
      <input {...props.input}></input>
    <div>
  )}

 

 <Input 
   label={ {htmlFor:'input', name:'이름을 입력하세요'} }
   input={ {type:'text', id:'input'} }
 />

 

• Input 컴포넌트에 props으로 label과  input을 전달하는데, 여기에는 모두 객체 데이터가 할당된다.