Written by Parkdev
on January 19, 2024

까먹지말자

[React] 까먹지 말아야할 것을 글로 정리해보자

Public폴더는 App.js에서 바로 접근가능하다.

<img src="/logo192.png">

위와같이 바로 접근이 가능하다
참고) build시에 public안에 있는 파일은 압축하지 않는다.
추후 서버에 올라갈때 이미지경로는 process.env.PUBLIC_URL을 붙여야한다.
- 이제까지 개발해보았을때 실제로 쓸지는 모르겠다. (static 이미지를 사용하는경우가 거의 없을것 같다)

API를 통해 데이터를 받아왔을때 useState를 사용하는게 편하다.
함수관련

function App() {
    return (
    ...
    {
            shoes.map(function (item, index) {
              return (
                <Compo key={item.id} shoe={item}></Compo>
                )
            })
          }
    ...
    )
}

function Compo(props) {
  return (
    <div className="col-md-4">
      <img src={"/img/m" + (props.shoe.id + 1) + ".jpeg"} alt="" />
      <h4>{props.shoe.title}</h4>
      <p>{props.shoe.content}</p>
    </div>
  )

함수는 반드시 대문자로 시작해야한다.
map으로 컴포넌트에 값을넣을땐 함수로 넘겨야한다.
html코드는 반드시 return안에 넣자
계산은 () 괄호로 감싸자

<img src={"/img/m" + (props.shoe.id + 1) + ".jpeg"} alt=""

(component는 key값을 넘겨주어야 된다. 고유 식별자로 사용되며 다른 값이 변경되었을때 구분하기 위함이다. )
오브젝트를 그대로 넘길 수 있다.

//Before
<Compo key={item.id} id={item.id} title={item.title} content={item.content}></Compo>
//After
<Compo key={item.id} item={item}></Compo>

외부 js파일을 불러오려면 먼저 해당파일에서 export를 해야한다.

...
export default 함수명
//OR
export {a, b} // 보낼 변수나 함수가 여러개인경우

그다음 불러올 곳에서 import하면 된다.

...
import 함수명 from 파일이름
//OR
import {a, b} from 파일이름 // 받을 변수나 함수가 여러개인경우

← → Top