[리액트] 이미지 넣기

순수 자바스크립트로 프로젝트를 진행하다, 리액트로 넘어갔을 때, 기초적인 부분까지도 너무 달라서 헤맨 적이 있습니다.
원하는 이미지를 넣고 싶었지만, 넣는 방법이 달라 한참 헤맨 적이 있습니다.
이번 포스트에서는 이미지 넣는 방법에 대하여 포스팅해 보겠습니다.

 

전체 코드

import "./styles.css";

export default function App() {
  return (
    <div className="App" style={{border:"1px solid", borderRadius:"20px", boxShadow:"2px 2px 2px gray"}}>
      <div >
        <a style={{width:"150px", height:"150px",borderRadius: "120px",backgroundColor:"white", }}>
            <img src={"https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"} alt =""  width='148' height='148' style={{marginTop:"6px",borderRadius: "80px",objectFit: "cover",marginBottom:"10px",}}/>
        </a>
      </div>
      <div>
        <p>
            <a style={{marginLeft:"10px"}}>teamnova</a>
        </p>
        <p  style={{marginLeft:"20px"}}>otodev9@gmail.com</p>
      </div>
    </div>
  );
}

 

기존 html에서는 이미지를 <img src="example.png" alt="My Image"> 처럼 사용했다면,

리액트는 <img src={example.png} alt="My Image">와 같이 사용하시면 됩니다.

또한 style 설정도 style={{원하는설정:"값"}} 과 같이 설정 해야합니다.