23.05.16

<<<<<<<<<<<<<<<<<설정>>>>>>>>>>>>>>>>>>>>>>>>

 

😀마켓플레이스 (컴포넌트 만드는거 도와주는거)

ES7 React/Redux/GraphQL/React-Native snippets

 

😀<cmd에서 react만들기>

C:\User\기태환>cd\

C:\>cd ncs

C:\NCS>cd workspace(react)

C:\NCS\workspace(react)>cd 02_jsx

C:\NCS\workspace(react)\02_jsx>npx create-react-app 02_jsx

C:\NCS\workspace(react)\02_jsx1>cd..

C:\NCS\workspace(react)>cd 02_jsx1

C:\NCS\workspace(react)\02_jsx1>code .
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 

😀보기 - 터미널 - npm start

 

😀

/*

  * render는 "화면에 그린다" 라는 의미를 가지고 있음

  * JSX 문법을 사용함

    - 컴포넌트에 여러가지 요소가 있다면 반드시 부모 요소 하나로 감싸 주어야 함

      ※ 하나의 부모 요소로 감싸야 하는 이유

        ==> Virtual DOM에서 컴포넌트의 변화를 감지해 낼 때 효율적으로 비교할 수 있도록

            컴포넌트 내부는 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문.

   

    - 자바스크립트 표현 방법

      자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}(중괄호)로 감싸주어야 함

      예) let name = "홍길동";

          <>

            <h2>{name} 님 방가방가</h2>

          </>

    - 조건부 연산자

      JSX 내부의 자바스크립트 표현식에서는 if문을 사용 못 함.

      하지만 조건에 따른 내용을 랜더링해야 할 경우에는

      JSX 밖에서 if문을 사용하여 사전에 값을 할당하거나,

      JSX 내부에서는 { } 조건부 연산자(3항연산자)를 사용해야 함

      예) let name = "홍길동";

        <>

          {name === "홍길동" ? (<h2>홍길동입니다.</h2>) : (<h2>홍길동이 아닙니다.</h2>) }

        </>

   

    - 문법적인 요소

      * 자바스크립트 코드이기 때문에 객체(class)를 정의할 수 있음

        예) class Hello {    }

      * CSS(스타일) 적용 시 class 작성 시 객체로 인식할 수 있기 때문에 오류가 발생하여 스타일 적용안됨

        따라서 CSS 적용 시에는 className이라는 속성을 사용

      * HTML에는 for 라는 속성이 있음

        자바스크립트에 for 반복문이 존재함

        따라서 JSX 문법에서는 htmlFor 라고 작성해야 함

      * 이벤트 핸들러들은 CamelCase 방식으로 작성해야 함

        예) onClick="", onFocus="", onMouseOver=""

      * JSX에서 주석문은 {}(중괄호) 안에 /*   */ 처리

 

 

*/

 

😀컴포넌트

(마켓플레이스에서 ES7 React/Redux/GraphQL/React-Native snippets    깔아야함)

// 컴포넌트를 만드는 단축 키 : refce

 

😀props

const Box = (props) => {

  return (

    <div>

      <div className='box'>

        BOX{props.num}

        <p>{props.name}</p>

      </div>

    </div>

  )

}

app.js에서 속성 value값을 적을 때 String은 ""로, 나머지는 {}로 처리

ex) <Box name="하루" num={1} />

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

😀state 불러오기

import {useState} from 'react';

import './App.css';

function App() {

  /*

    1. user(사용자)가 버튼을 클릭한다

    2. 상단에 있는 값이 변해야 한다

  */

  let counter = 0;

  const [counter2, setCounter2] = useState(0);

  const increase = () => {

    counter = counter +1;

    setCounter2(counter2 +1);

    console.log("counter >>> ", counter, "counter2 state는", counter2);

  }

  /*

    1. 사용자가 버튼을 클릭한다.

    2. counter + 1 해서 1이 됨

    3. setState 함수 호출

    4. console.log() 가 실행이 됨

       변수값은 1로 보이고, state 값은 increase() 함수가 끝나지 않았기 때문에 그 전의 값이 보인다.

       함수가 끝나야 setCounter2()함수가 처리가 됨 ==> 비동기식으로 처리가 됨

    5. App 다시 리랜더링이 됨 (화면이 바뀐다)

    6. let counter = 0 을 거치면서 counter 변수 값은 다시 0으로 초기화 된다.

    7. state 값은 update가 되면서 다시 render 를 한다.

    8. 즉, 변수는 리랜더링이 될 때마다 값이 초기화가 된다.

       하지만, state 값은 비동기적으로 처리가 됨

  */

  return (

    <div>

      <div>{counter}</div>

      <div>state : {counter2}</div>

      <button onClick={increase}>클릭</button>

    </div>

  );

}

export default App;

 

 

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

08_shoppingmall

 

<리액트 아이콘 사용>
홈페이지 : https://fontawesome.com/docs/web/use-with/react/

1. Add SVG Core
2. Add Icon Packages(Free)
3. Add the React Component

--> 어디서 아이콘이 쓰일지 몰라서 다 다운 받아야함 (터미널에 복붙)
--> 사용방법 홈페이지 using에 있음

아이콘 색깔 검->흰 : import문장에서 solid -> regular로 변경


<리액트 json 사용>
홈페이지 : json server npm
0. 새로운 터미널 만들기
1. 제이슨 서버 설치 : npm install -g json-server
2. 제이슨 서버에서 db.jons 찾기 (기본이 3000인데 이미 쓰고 있으므로 5000포트로 변경) :
npx json-server --watch db.json --port 5000


<부트스트랩>
홈페이지 : npm bootstarp
0. ctrl+c : 작업을 종료하시겠습니까 ? y
1. install : npm install react-bootstrap bootstrap

2. cdn(css) :  import 'bootstrap/dist/css/bootstrap.min.css';

 

----------------------------

<redux>

검색 : redux
npm install redux

검색 : react redux
npm install react-redux