[React] React 문법과 변수선언 , ESLint, Prettier

기본 헷갈리는 것 

- (1)과 (2)는 똑같은 결과를 나타냄 

(1) 함수형 ~ 

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

export default App;

 

(2) 함수형 const 

const App =() => {
  return(
    <div className="App">
    <h1> CRUD APPLICATION</h1>   
   </div>
  )
}

export default App;

 

---

const & let 

const? 

- ES6 문법에서 새로 도입되었으며 한번 지정하고 나면 변경이 불가능한 상수를 선언할 떄 사용하는 키워드

import React, {Fragment} from 'react'; 

const App = () => {
  const name = "React Example";
  return(
    <Fragment>
    <h1> Hello React</h1>
    <h2> {name} </h2>
   </Fragment>
   )
};

export default Ap

let? 

- 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드 

- 값을 바꿀 때 주로 사용

 

---

PropTypes 

- Type 지정 가능 

import PropTypes from 'prop-types'; 
...


const FollowList = ({header, data}) => {
    return ()
    };
    
....

FollowList.propTypes = {
    header : PropTypes.string.isRequired,
    data : PropTypes.array.isRequired
};


export default FollowList; 

 

데이터 정의

예제1)

const initialState = {
  inputs: {
    username: '',
    email: ''
  },
  users: [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]
};

 

예제2)

    const followerList = [{nickname : "가"},{nickname : "나"},{nickname : "다"}]
    const followingList = [{nickname : "라"},{nickname : "마"},{nickname : "사"}]

 

---

Generator 문법 

- javascript 문법 

 

 

 

 

 

 

 

 

---

ESLint & Prettier 

1. ESLint

-  문법 검사 도구

- VS CODE에서 View -> Problems 확인 

 

 

 

2. Prettier 

- 코드 스타일 자동 정리 도구 

- F1 키보드 입력 -> format 입력 -> Enter 누르기 

 

 

 

 

 

<출처>

1. m.blog.naver.com/gi_balja/221232680603

2.