개인 공부를 위해 작성했습니다

React🎉

✨참고✨ React가 빠른 이유? virtual(존재하지 않는)

• 소스코드에 처음부터 HTML을 넣지 않고,
• HTML에서 HTML을 추가하거나 제거하기 떄문
• application이 로드할 때 비어 있는 HTML을 로드하게 되고,
• 그런 다음에 react가 HTML을 밀어넣게 된다

• 기본
  • import 변수명 from '';
  • import '경로/파일명.css'; css파일
  • import '경로/파일명'; js파일
  • ReactDOM.render(컴포넌트를 만들어, 보낼 장소); document.getElementByid('root');
  • React.createElement('컴포넌트', {속성명}, 컨텐츠);

●JSX & PROPS

JSX ❔ javascript와 HTML사이의 조합 ❕

• React의 특화된 개념 중 하나

• 렌더링

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />, // component를 사용하고자 할 때의 component의 형태
  document.getElementById('root') //HTML문서의 #root에 밀어넣어라!
);

○component❔ HTML을 반환하는 함수❕

• component를 작성할 때 마다 import React from 'react';를 써줘야 함
• 이것을 하지 않으면 react는 여기에 jsx가 있는 component를 사용하는 것을 이해하지 못함

✨참고✨

component에는 함수형 component가 있고 class형 component가 있다

• component 만들기
  • src에 App.js 만들고
  • App.js에 코드 작성
  • 🚩집중! App.js 파일에 함수를 만들 때는 함수명은 항상 대문자로 시작하기!

import React from 'react';

function App() { // 함수명은 항상 대문자로 시작할 것!
  return <div className="App" />;
}

• 실습 <Potato />

import React from 'react';
import Potato from './Potato';

function App() { 
  return (
    <div>
      <h1>Hello!</h1>
      <Potato />  // Potato.js 불러오기
    </div>
  )
}

export default App;

🚩집중!

• react application은 한 번에 하나의 component만 렌더링 할 수 있다
• application안에서 많은 component를 넣을 수 있고,
• 이러한 component안에 더 많은 component를 import할 수 있다

○component 2개 만들기

• props를 이용해서 component에 정보를 보낼 수 있고
• component는 재사용이 가능하다

import React from 'react';

// name과 image라는 2개의 props를 받는 Food라는 component
function Food({ name, picture }) {  // props.name= { name}
  return <div>
    <h2>I Like {name}</h2>
    <img src= {picture} alt={name} />
    </div>;
}

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image: "https://cdn.imweb.me/thumbnail/20200415/6b6e035658bac.png"
  },
  {
    id: 2,
    name: "Kimbap",
    image: "https://mp-seoul-image-production-s3.mangoplate.com/27597_1612961584980557.jpg?fit=around|512:512&crop=512:512;*,*&output-format=jpg&output-quality=80"
  },
  {
    id: 3,
    name: "Samgyopsal",
    image: "https://t1.daumcdn.net/cfile/tistory/2076CB0E4B5F2CE405"
  },
  {
    id: 4, 
    name: "Bibimbap",
    image: "https://static.wtable.co.kr/image-resize/production/service/recipe/582/4x3/a587ba43-a6ee-482d-a3ed-8ea0dba90e7f.jpg"
  }
]

// 함수형 component
function App() {
  return ( // name과 image라는 2개의 props를 받는 Food라는 component
    <div>
      {foodILike.map(dish => ( // dish===object
        <Food key={dish.id} name={dish.name} picture={dish.image} /> // dish.name===object.name
      ))} 
    </div>
  );
}

export default App;

👏결과: http://192.168.56.1:3000

---

●State

○Class Components와 State

state === object. component의 data를 바꿀 때 사용.
state의 상태를 변경할 때는 render function을 호출해서 바꿔야 함

setState는 새로운 state와 render function을 호출해서 자동으로 refresh됨

import React from 'react';

//  class형 component
// class형이라 return은 없고
// render method를 가지고 있다

class App extends React.Component {
  constructor(props) {
    super(props);
  };
  state  = {
    count: 0
  };

  add = () => {
    // console.log('add');
    // bad case "this.state"
    this.setState({ count: this.state.count +1});
  };

  minus = () => {
    // console.log('minus');
    // good case "current"
    this.setState(current => ({ count: current.count -1}));
  };

  // render function
  render() {
    return ( // class형 component에는 this 개념이 있다
      <div> 
        <h1>The number is: {this.state.count}</h1> 
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

export default App;

✨참고✨ state와 props의 차이점은❔❔

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다.

• props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면,
• state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.

○Component의 Life Cycle Method

react component를 생성하고 삭제하는 방법

1. mounting

• 생성을 의미
  • constructor()
  • componentDidMount() 마운트 된 이후에 호출

2. update

• 일반적인 update
  • componentDidUpdate() 업데이트 된 이후에 호출

3. unmounting

• component 제거
  • componentWillUnmount() 컴포넌트가 떠날 때 호출

○data fetch

• data-fetching 코드를 어디에 적용하느냐가 중요한데,
• componentDidMount() 메소드는 컴포넌트가 접속되고 state가 수정될 때 작동한다
• 즉, componentDidMount() 지점이 data-fetching하기 좋은? 타이밍?!

---

●React 조건문 : 삼항연산자

• 조건문 → if문은 에러없이 결과 출력이 안되므로 → 삼항연산자 이용
• 🚩집중!if문은 에러없이 결과 출력이 안됨. 사용하지 말 것!!!

---

●React 배열! useState

• useState → import 같이 불러들이기 ⇒ import React, {useState} from 'react';
• useState란? 초기셋팅한 값과 변경하는 값을 셋트로 관리
• useState → 배열
• const [변수, set변수] = useState(값);
• 초기셋팅 → set변수 = 값;
• 🚩집중!

useState → 이벤트 값의 변화
useState 사용 → const [변수명, set변수명] = useState(초기값)
                      이벤트 → onClick
                      onClick = { () => set변수명(변경값) }

---

✅ 목표!

• (더 어려워졌군;; 차근차근 하나씩!!)
• React 개념 잡기!!!
• props와 state

Nomad Coders
React_자습서