React.js - k821209/pipelines GitHub Wiki

# index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';


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

# app.js
import React from 'react';

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

export default App;

# prop-types 활용
import PropTypes from 'prop-types';
Food.propTypes = {                    # Food는 정의 되어 있는 함수(콤포넌트) 임. 
   name = PropTypes.string.isRequired
   age  = PropTypes.string.isRequired # 이런식으로 Prop에 들어가는 변수들의 성격 및 필수 여부를 미리 지정할 수 있음 
                                      # Warning을 뿜는다. 
}

# potato.js
import React from 'react';

function name(){  # component이름이 됨 향후 해당 컴포넌트는 html문법이 들어가는 곳에서 <name /> 식으로 삽입이 된다. 
    return(  # 여러줄이 들어갈 경우 괄호를 열어주고, 한줄일 경우에는 괄호가 없어도 된다. 
        <h1>Hello</h1># 여기에는 HTML 문법이 들어온다.    
    ) 
}

export default name; # App.js 외에 컴포넌트가 정의되어 있을 경우에 App.js에서 불러서 쓰기 위해서는 export를 해줘야함 

# App.js 

import React from 'react';

function Food(props){ # 여기서 props 가 json모양의 데이터라는 것을 알고 있고 keys를 알고 있고 그중의 일부만 쓸때
                      # 예를 들어 fav 변수만 사용하고 싶다면 props 대신에 {fav} 라고 입력해놓으면 props 의 fav 의 value만
                      # 사용가능하다. return 에서 fav로 바로 사용가능 
                      # props 에는 꼭 key를 만들어줘야 에러가 안남
    return (
        console.log(props)
        <h1>hello {props.fav} </h1> # props 를 html표현 단에서 사용하기 위해서는 {} 로 변수명을 묶어주면됨. 
    ) 
}

function App(){
    return (
        <div><Food fav='kimchi' boy={true} /></div>  # Food component다음에 들어가는 fav 등등을 property라고 부름 줄여서 props 라고 함. 이것은 Food component의 일종의 parameter로 들어가며 json 형식의 object로 들어가는것을 console.log(props) 로 확인 가능 
)
{

const certainArray = [1,2,3,4]
certainArray.map(function) # array 형식에 바로 map 메서드가 들어있음. 괄호안에 필요한 함수를 넣으면 그만임. 
                           # 괄호안에 function(){return calc} 로 진행하면 return의 output 으로 array가 생성
                           # function 표현은 ES6 ()=>{} 가능