0603 TIL React

What is JSX?

JSX란 HTML + JavaScript 의 형태.

component = HTML을 반환하는 함수

<App /> 이런형태. 대문자로 시작한다. pug의 partical쓰는거랑 비슷함.

How to use?

1. 대문자로 시작하는 js파일을 만든다. ex) Tomato.js
2. Tomato.js파일내에 function Tomato(){...} 함수를 만들고 export한다.
3. index.js내에서 새로만든 컴포넌트인 Tomato를 import 할 수 없다. 왜냐면 ReactDOM.render(<App />, document.getElementById("root")); 에서 컴포넌트는 only 하나만 가능하기 때문.

   ✅ Fragment를 통해 컴포넌트를 한개 이상 넣기 가능. 의미없는 div를 안 만들어도 된다. <> , < /> 를 추가하면 속성부여없이 태그들을 묶어주기 가능!

4. 새로 만든 컴포넌트는 App.js 내부에 import 해서 쓸 수 있다. Tomato 를 import 해준 뒤, 원하는 위치에 <Tomato />만 해주면 끝.

component에 prop 가지기

<Food fav="kimch" /> ⇒ fav = prop / kimch = value

<Food />라는 컴포넌트에 fav라는 이름의 property에 "kimchi"라는 value를 준것.

prop은 어떤 형태로든 가질 수 있다.

ex) something={true} dadada={["hi",1,2,3,4,true]} boolean, number... everthing is OK!

이 모든 prop 들을 argument로 전달하면 됨!

ES6의 masic은 Food(props){ console.log(props.fav) } 로 props이름의 값을 가져올 수 있고, Food( { fav } )로 줄여서 쓸 수 있다.

.map()

array의 각 item에 funtion을 적용하고 적용된 array를 반환.

ex)

let friends = [ yang, park, lee, yeo ];
friends.map(friend =>{
	return 0; // [0, 0, 0, 0]
});
friends.map(friend =>{
	return friend + "💖"; // [ yang💖, park💖, lee💖, yeo💖 ]
})

map은 array를 취하고 우리가 정확히 원하는 array를 반환한다.

Array 전체 리스트가 필요할 때 map을 사용하면 된다!

리액트에서 반복되는 형식의 컴포넌트를 사용해야 할 때 하나씩 만들 필요 없이 .map()을 사용하면 간단!

const favList = [
  {
    name:"김밥",
    img:"...",
	},
  {
    name:"곱창",
    img:"...",
  },{...}
]
function Food( { name, img } ) {
  return <div>
  <h2>I love {name}</h2>
  <img src={img} atr={name} />
  </div>
};

function App() {
  return 
    <div>
      {favList.map(fav => { 
        <Food name={fav.name} img={fav.img} // favList의 이름과 이미지를 반환
      });
    </div>
};

"key" prop 에러가 뜰 경우

모든 element들은 유일성을 가지고 있지만 이것들을 list 안에 넣게 되면 유일성이 없어진다.

그래서 list 각각 항목에 id를 주고, 컴포넌트에 key prop을 준 뒤 { id }를 넣어주면 됨.

{favList.map(fav => {<Food key={fav.id} name={fav.name} img={fav.img}});

propTypes 체크하기

npm i prop-types 설치 후, 임포트하고, 컴포넌트 바로 밑에 Component.propTypes = {...}로 검사할 수 있다.

Hobby.propTypes = {
  fav: PropTypes.string.isRequired, // isRequire은 fav항목이 비어있다면 에러가 남.
  img: PropTypes.string.isRequired, 
}

prop은 읽기전용!

컴포넌트의 자체 prop을 수정할 수 없다.

모든 컴포넌트는 prop을 다룰 때 순수함수처럼 동작해야 한다!

⇒순수함수란? 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대한 동일한 결과를 반환한다.

funtion sum(a,b){
  return a+b; // 자신의 입력 값을 변경하지 않기때문에 순수함수.
};

function withdraw(account, amount){
  account.total -= amount; // prop인 amount의 값이 변경되기 때문에 순수함수X
}

다른요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경하려면 state를 사용하면 된다.

함수 컴포넌트 & 클래스 컴포넌트

함수컴포넌트 = JavaScript 함수로 컴포넌트를 정의하는 것. function Welcome(props) {...}

클래스 컴포넌트 = class는 몇가지 추가기능이 있다 (ex: state) 이를 사용하려면 class컴포넌트를 사용해야함. class Welcome extends React.Component{ render() {...} } 위와 같게 동작함.

⇒ Hook 업데이트로 함수컴포넌트에서도 state를 사용할 수 있다. 함수컴포넌트에서는this.state를 사용할 수 없으므로 useState Hook을 직접 컴포넌트에 호출하면 된다.
https://ko.reactjs.org/docs/hooks-state.html#declaring-a-state-variable**