React 기초 애매하고 사소한 개념 정리

함수를 map 으로 돌릴 때 매개변수 생략이 가능한가?

 

const foodList = [{id:1, name:'kimchi', image:'#'}, {id:2, name:'soup', image:'#'}]

function renderFood(dish){
  console.log(dish)
  return <Food name={dish.name} image={dish.image} key={dish.id}/>
}

function App() {
  return (
    <div className="App">
      {foodList.map(renderFood)}
    </div>
  );
}​

 

foodList.map(renderFood(item)) 이렇게 넣어줘야하지 않나 싶었는데

현재 요소가 매개변수로 전달이 되기 때문에 매개변수 생략이 가능하다

foodList의 name, image, id 가 각각 렌더링 될 때 들어갈 것이다.

 

---

 

리액트의 생명주기 용어 크게 3가지이다

 

Mounting  = 태어나는 것 (컴포넌트 렌더링)

Updating = 업데이트하는 것

Unmounting = 죽는 것 (페이지가 바뀔 때)

 

함수형 컴포넌트를 사용하려면 각각의 생명주기를 다루겠지만,

클래스형 컴포넌트를 사용하고 hook 을 사용하게 되면 생명주기가 포함되어서 hook 만 익혀도 되는 간편한 부분이 있다.

 

---

 

npm VS npx

 

npm 은 로컬환경에 다운받아서 계속 사용하고 싶은 경우

npx 는 로컬환경에 저장하는게 아니라 패키지를 가져와서 실행만 해버리는 것

create-react-app 은 계속 가지고 있을 필요가 없고, 처음에 react 실행할 때만 필요하다.

그리고 create-react-app 이것은 버전이 또 자주 바뀌어서 한번 다운받고 저장하면 버전 반영이 안되기 때문에 npx 로 설치하는 것이다.

 

---

return{} vs return()

 

return{} 템플릿 리터럴처럼 js 와 같은 공간. 계산식, 변수명 등등,,

return() JSX 반환, 바로 렌더링이 됨

 

function(){
  console.log()
}

 

값을 반환하거나 돔을 반환하기보다

위와 같이 테스팅 코드나 돔을 조작하는 목적으로 함수를 쓰다 보니

return 에 대한 개념이 별로 없었다.

return 값이 있나 없나? return 값이 무엇인가? 를

함수를 쓸 때 생각해보는 습관을 가지면 좋을 것 같다.

반환하는 값이 없다면 그냥 Undefined 였을 것

 

내가 멘토링 때 했던 질문이 있다.

 

Q. 버튼에 클릭 이벤트를 걸어줄 때 헷갈리는 부분이 있습니다.

onClick={() => {handleDelete(expense.id)}}

onClick={() => handleDelete(expense.id)}

{} 을 감싸던지 감싸지 않던지 차이가 없는데, 개인 코드 스타일에 따라서 {} 유무를 결정하면 되는것인지 궁금합니다.

 

A. {} 으로 한 번 더 감싸주느냐? 아니냐. 스타일의 차이라기 보다는 기능적인 차이가 있음.

{} 는 return 을 적어줘야만 리턴이 됨.

{} 가 없는 것은 {return} 의 축약형임.

onClick 에 {함수명}을 넣어주면 리턴값이 없음.

onClick 은 리턴값보다 실행시켜주는 의미이기 때문에

리턴값이 없는 것은 두 개의 차이가 없을것.

 

Q. 그리고 handleEdit 이라는 함수를 실행시키고 싶을 때, 아래 두개가 차이가 있는지 궁금합니다

onClick={() => handleEdit()}

onClick={handleEdit}

 

A. 컨벤션 차이일것 - handle() 매개변수가 없으면 () 생략 가능한데,

인자값이 있으면 () ⇒ handle() 렌더링 될 때마다 새로운 함수가 생기면서 매번 새로 생기는 것.

성능적으로는 handle 이렇게 적는게 나음.

매개변수를 받는게 있다 한다면 () ⇒ handle(). 이 외에 bind 해주는 방법도 있음

 

1. 함수명 (권장)

2. bind

3. () ⇒ 함수명() 콜백

 

---

export default vs export

 

export default 중괄호 없음. 이름도 변경 가능.

export 중괄호 있음. 이름이 같아야 함, 여러 개 일 때 사용함.

 

---

 

props vs state

 

props 는 읽기전용. properties 의 약자로써 부모는 내려주고 자식은 변경할 수 없음.

state 는 쓰기전용. 컴포넌트 내부에서 변경 가능한 데이터 관리.