React

eugene's blog·2021년 8월 1일
JavaScriptReact
0
post-thumbnail

what is react?

자바스크립트 라이브러리(angular.js / Vue.js / jQuery)

https://2019.stateofjs.com/front-end-frameworks/

for the beginning

  • VSC
  • NPM
  • NPX
  • git

1. SETUP

Create your React App

현대적인 코드를 못난 코드로 바꿔주는 과정이 필요 → create-react-app 이 대신 해줌

  1. npx create-react-app [YOUR_APP_NAME]
  2. npm start

Creating a Github Repository

  1. git init
  2. sign up github.com
  3. make repository
  4. url copy
  5. git remote add origin [URL]
  6. git add .
  7. git commit -m "[MESSAGE]"
  8. git push origin master

How does React work?

App.js와 index.js를 제외한 src폴더 안에 있는 모든 것을 지운다

App.js

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

index.js

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

React는 html을 밀어넣는다! (component에 작성해 뒀던 것들)→ html에서 html을 추가하거나 제거할 수 있다.

2. JSX & PROPS

Component → UI 조각

html을 반환하는 함수

<[COMPONENT_NAME] />

javascript와 html사이의 이런 조합을 JSX라고 한다.

첫번째 Component인 Potato를 만드는 방법

  1. src에 Potato.js를 만든다
  2. 내용을 작성하고 사용할 수 있게 export한다.
  3. App.js에 추가한다. → index.js에 직접 추가하지 않는 이유 : react application이 하나의 component만을 Rendering해야하기 때문

Potato.js

import React from "react";

function Potato(){
    return <h3>I love potato</h3>;
}

export default Potato;

App.js

import Potato from "./Potato";

function App() {
  return (
    <div className="App">
      <h2>Hello!</h2>
      <Potato /> 
    </div>
  );
}

export default App;

Reusable Components with JSX + Props

App.js

function Food(){
  return <h1>I like Potato</h1>
}

function App() {
  return (
    <div className="App">
      <h2>Hello!</h2>
      <Food name = "kimchi"/>
    </div>
  );
}

export default App;

→ food component에 kimchi라는 value로 prop name을 준다.

→ food component에 name이라는 이름의 prop(property)를 kimchi라는 value로 준 것

function Food(){
  return <h1>I like Potato</h1>
}

function App() {
  return (
    <div className="App">
      <h2>Hello!</h2>
      <Food 
        name = "kimchi"
        something={true}
        papappap={["hello", 1, 2, 3, 4, true]}
      />
    </div>
  );
}

export default App;

여러가지 자료형을 value로 가질 수 있다.

function Food({ name }){
  return <h1>I like {name}</h1>
}

function App(props) {
  console.log(props);
  return (
    <div className="App">
      <h2>Hello!</h2>
      <Food 
        name = "kimchi"
      />
    </div>
  );
}

export default App;

props로 properties들을 다 가져올 수 있고 {property name}으로 값을 사용할 수 있다.

JSX = html + javascript

props = component에 넣게되는 속성

Dynamic Component Generation(웹사이트에 동적 데이터를 추가하는 방법)

map → array로부터 array를 줌

→ array의 각 item에서 function을 실행하는 array를 가지는 javaScript function이며 그 function의 result를 갖는 array를 나에게 준다

function Food({ name }){
  return <h1>I like {name}</h1>
}

const foodILike = [
  {
    name: "Kimchi",
    image: "https://www.feastingathome.com/wp-content/uploads/2020/05/Kimchi-Noodles-10.jpg"
  },
  {
    name: "Ramen",
    image: "https://1.bp.blogspot.com/-R5uQo-tGPJA/VGUmdQ46L0I/AAAAAAAANTg/3GoTSQ8SLWE/s1600/515.jpg"
  },
  {
    name: "MakChang",
    image: "https://blogthatcake.files.wordpress.com/2013/08/113.jpg "
  },
]

function App(props) {
  console.log(props);
  return (
    <div className="App">
      {foodILike.map(dish => <Food name={dish.name}/>)}
    </div>
  );
}

export default App;

여기서 dish는 object

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image: "https://www.feastingathome.com/wp-content/uploads/2020/05/Kimchi-Noodles-10.jpg"
  },
  {
    id: 2,
    name: "Ramen",
    image: "https://1.bp.blogspot.com/-R5uQo-tGPJA/VGUmdQ46L0I/AAAAAAAANTg/3GoTSQ8SLWE/s1600/515.jpg"
  },
  {
    id: 3,
    name: "MakChang",
    image: "https://blogthatcake.files.wordpress.com/2013/08/113.jpg "
  },
]

function Food({name, picture}){
  return <div>
    <h1>I like {name}</h1>
    <img src={picture} alt={name} />
  </div>
}

function App() {
  return (
    <div className="App">
      {foodILike.map(dish => <Food key={dish.id} name={dish.name} picture={dish.image}/>)}
    </div>
  );
}

export default App;

Protection with PropTypes

npm i prop-types

prop-types: 어디가 틀렸는지 검사해주는 라이브러리

**import propTypes from "prop-types";**

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image: "https://www.feastingathome.com/wp-content/uploads/2020/05/Kimchi-Noodles-10.jpg",
    ratings: 5
  },
  {
    id: 2,
    name: "Ramen",
    image: "https://1.bp.blogspot.com/-R5uQo-tGPJA/VGUmdQ46L0I/AAAAAAAANTg/3GoTSQ8SLWE/s1600/515.jpg",
    ratings: 4.7
  },
  {
    id: 3,
    name: "MakChang",
    image: "https://blogthatcake.files.wordpress.com/2013/08/113.jpg",
    ratings: 4.3
  },
]

function Food({name, picture, ratings}){
  return <div>
    <h1>I like {name}</h1>
    <h4>{ratings}/5.0</h4>
    <img src={picture} alt={name} />
  </div>
}

**Food.propTypes = {
  name: propTypes.string.isRequired,
  picture: propTypes.string.isRequired,
  ratings: propTypes.number.isRequired
};**

function App() {
  return (
    <div className="App">
      {foodILike.map(dish => <Food key={dish.id} name={dish.name} picture={dish.image} ratings={dish.ratings}/>)}
    </div>
  );
}

export default App;

3. State

component는 class component와 function component로 나뉜다

Function component는 함수이고 return을 해서 screen에 표시가 된다.

Class component는 class이고 react component로부터 확장되어서 screen에 표시가 됨 → 이걸 render 안에 넣어야 됨

state = object

data will change

javascript 함수 - .function() : 바로 실행, .function : event 일어날 때만

import React from 'react';

class App extends React.Component{
  state = {
    count: 0
  };
  add = () => {
    **this.state.count = 1; // 이런 식으로 직접 접근하면 안됨**
  };
  minus = () => {
    console.log("minus");
  };
  render(){
  return(
    <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;
import React from 'react';

class App extends React.Component{
  state = {
    count: 0
  };
  add = () => {
    this.setState({count: 1});
  };
  minus = () => {
    this.setState({count: -1});
  };
  render(){
  return(
    <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;

setState를 호출하면 react가 state를 refresh하고 또한 render function을 호출

not good

import React from 'react';

class App extends React.Component{
  state = {
    count: 0
  };
  add = () => {
    this.setState({count: this.state.count + 1});
  };
  minus = () => {
    this.setState({count: this.state.count - 1});
  };
  render(){
  return(
    <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;

better(state를 set할 때 , react에서 외부의 상태에 의존하지 않는 가장 좋은 방법)

import React from 'react';

class App extends React.Component{
  state = {
    count: 0
  };
  add = () => {
    this.setState(current => ({count: current.count + 1}));
  };
  minus = () => {
    this.setState(current => ({count: current.count - 1}));
  };
  render(){
  return(
    <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;

매순간 내가 setState를 호출할 때 마다 react는 새로운 state와 함께 render function을 호출함

Component life cycle

life cycle method : react가 component를 생성하고 없애는 방법

Mounting (born)

  • constructor

Updating

Unmounting (die)

profile
eugene's blog
매일 노력하는 개발자 김유진입니다.
이전 포스트

javascript

다음 포스트

Redux

0개의 댓글