일단 하나를 해보자

https://kyun2da.dev/react/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%EC%9D%98-%EC%9D%B4%ED%95%B4/

리액트 네이티브란?

페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크이다.

HTML,CSS 대신 자바스크립트 스레드로 이뤄져 있다.

장점

 JavaScript를 사용하여 Android 와 iOS를  동시에 개발할 수 있어 효율적이다.

codePush를 통한 배포로 원하는 기능을 스토어를 거치지 않고 할 수 있다.

쉽고 빠른 UI 작성을 할 수 있다.

리액트 개발자가 사용하기 쉽다.

단점

성능이슈가 쉽게 나타나 낭비되는 렌더링을 확인해야 한다.

버그의 원인을 추적해나가는 과정이 다소 어렵다.

빌드타임이 오래 걸린다.

Windows, Linux 또는 Mac OS를 사용하여 React Native를 시작할 수 있습니다.

iOS 및 Android 환경은 Mac OS에서 모두 사용 가능하지만

Linux와 Windows는 Android 환경만 지원합니다.

React Native 개발을 위해 macOS를 사용한다고 하지만 Windows 및 Linux에서도

할 수 있다.

React Native 를 시작하는 두 가지 방법이 있다.

Expo CLI  

설치 및 배포가 쉬움 하지만 expo 라이브러리를 써야돼서 한정적일 수 있음

React Native CLI

설치해야되는 것들이 상대적으로 많음

expo란?

“create-react-native-app was replaced by expo-cli.”

Expo CLI는 개발자와 Expo 도구 간의 기본 인터페이스인 명령줄 앱입니다.

쉬운 앱개발을 할 수 있습니다.

Expo 는 ios, Android앱 개발할 수 있는 프레임워크이자 플랫폼이다

https://docs.expo.dev/workflow/expo-cli/

expo 설치 (with 타입스크립트)

Nodejs 가 설치되어있어야 한다.

npm install -g expo-cli

expo init 폴더명

cd 폴더명

npm start # you can also use: expo start

(expo 앱 깔아서 QR찍어서

핸드폰으로 연동해서 보면 되는데 

만약에 

android emulator로 보고 싶으면

Run on Android device/emulator 를 클릭하면, 자동으로 연결된다.

또는 터미널 상에서 a 버튼을 누르면 바로 실행된다.

Press a for Android emulator, or w to run on web.)

기존 프로젝트에 typescript 추가하기

npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

참고 :

https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project

TypeScript 구성 파일을 추가합니다. tsconfig.json프로젝트의 루트에 생성

{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react-native",
"lib": ["es2017"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}

jest.config.jsTypeScript를 사용하도록 Jest를 구성 하는 파일 만들기

module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

JavaScript 파일의 이름을 다음과 같이 변경하십시오.*.tsx

./index.js은 그대로 두어야 한다. 그렇지 않으면 프로덕션 빌드 번들링과 관련하여 문제가 발생할 수 있습니다.

yarn tsc

새 TypeScript 파일을 유형 검사하려면 실행하십시오 .

(만약 안된다면  npm install typescript –g 로 전역설치

https://stackoverflow.com/questions/39404922/tsc-command-not-found-in-compiling-typescript)

react native cli 설치

- “고급 시스템 설정”에서 환경변수 수정 (시스템속성->환경변수 -> 새로 만들기)

변수 이름 적고, 하단에는 설치한 폴더 경로 입력 후 확인.

-시스템 변수에서 path 클릭, 새로 만들기 클릭, %JAVA_HOME%\bin 입력후 확인

-명령 프롬프트 에

javac    (javac 명령오는 텍스트 파일로 작성된 java 파일을 bytecode로 컴파일함)

java-version 입력해 버전 값 나오는지 확인

2. 안드로이드 스튜디오 설치 및 환경설정 Download Android Studio and SDK tools  |  Android Developers

-Tools에서 SDK manager 들어가서 사용할 디바이스 선택 및 설치

-환경변수 수정

3. Nodejs 설치 Node.js (nodejs.org)

4. Python 설치 Download Python | Python.org

5. npx react-native init AwesomeProject  

(타입스크립트 템플릿 추가

npx react-native init AwesomeTSProject --template react-native-template-typescript

)

6. npx react-native start

7. npx react-native run-android (새 터미널 창에서 입력, npm run android 해도 됨)

참고(특히 환경변수 설정 참고~~!) : https://marshmello.tistory.com/69

https://reactnative.dev/docs/environment-setup

에러났을 때

-에러 SDK tool 안 깔려 있는 것이 없는지 확인

-경로 확인(환경변수 확인)

에러 

error failed to launch emulator. Reason:No emulators found as an output of `emulator -list-avds` 

Could not determine the dependencies of task ＇:app:compileDebugJavaWithJavac＇. > SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project＇s local properties file

해결

local.properties 파일 만들어서 해결

(sdk.dir=해당 경로 입력)

참고: https://healthcoding.tistory.com/35

https://eso0609.tistory.com/92 

https://stackoverflow.com/questions/59355688/how-to-solve-the-error-failed-to-launch-emulator-reason-no-emulators-found-as

scoop는 설치 프로그램

scoop로 설치한 프로그램은 scoop update *로 한번에 업데이트할 수 있음

파워셸에서 관리자 메뉴로 실행

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

A-예 로 응답.

$env:SCOOP='C:\Scoop'

"환경변수 편집" 검색

새로 만들기 눌러서

변수이름 SCOOP

변수값 C:\Scoop

로 하고

다음명령어 실행했는데

계속 이 에러 떴음

Running the installer as administrator is disabled by default, see https://github.com/ScoopInstaller/Install#for-admin for details. 

(결국 환경변수 편집한거 삭제해봤는데 그게 문제는 아니었음. 하지만 다음 진행하다보니 삭제한 상태에서 깔아버린 나.. 사용자 안에 C:\안에 scoop가 생겼더라고)

해결)

관리자모드였던 창 끄고 새로운 power shell 창에서 실행했다

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

node 설치   (-> 이미 설치되어있어서 스킵)

LTS버전이 바람직하다고 함 리액트 네이티브 개발은 Nodejs버전에 영향을 받기 때문에!

에러 나면 나도 다시 깔아야지..

scoop install nodejs-lts
node -v

git 설치 -> 이미 설치되어있는데 무심코 깔아버린 나

scoop install git

자바8설치

리액트 네이티브 사용해서 안드로이드 앱만들려면 안드로이드 SDK빌드 도구가 필요하다. 근데 앱이 동작하는 안드로이드폰의 운영체제는 자바버전8이다. 자바버전8JDK 설치해야한다

scoop bucket add java

scoop install adopt8-hotspot

에러 뜸 ) Couldn't find manifest for 'adopt8-hotspot'.

자바버전 체크도 안됨

해결)

scoop install temurin8-jdk

버전 체크

java -version

비주얼 스튜디오도 깔려 있어서 넘어가고 

안깔려있따면 이거 하기

scoop bucket add extras
scoop install vscode

안드로이드 스튜디오와 개발도구인 안드로이드 SDK 설치할거야

scoop install android-studio android-sdk

에러) Couldn't find manifest for 'android-sdk'.

해결 )

scoop bucket add extras

다시 설치 실행

scoop install android-studio android-sdk

근데 스튜디오는 중간에 끊김..

다시 설치~

scoop install android-studio

휴~~

<에러에  도움 준 글>

https://www.pabburi.co.kr/content/javascript/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B0%98-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%9C%88%EB%8F%84%EC%9A%B010-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95/

노마드코더 강의 보는중

리액트 네이티브는 브라우저가 없음, 웹사이트가 아니야!

앱개발하는데 필요한 java 등등 깔아줄게 많음

그래서 강의에서는 네이티브 코드 바로 시작할 수 있게 expo 써서 한다.

핸드폰에 expo앱깔면 연동으로 보이네 신기하다

(expo 설치 내용 https://docs.expo.dev/)

( https://snack.expo.dev/ 여기서 작업하면 visual studio도 필요없고 node, npm 설치 안했어도 바로 테스트할 수 있음)

리액트 네이티브는 웹사이트가 아님!

HTML이 아니기 때문에 div쓸 수 없음

대신에 view를 씀 얘는 container컨테이너다 (react Native에서 import해와야 쓸 수 있음!)

(The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling,,,)

react native에 있는 모든 텍스트는 text component안에 들어가야한다

border css는 사용불가능하다

처음에 react Native는 많은 컴포넌트와 API를 지원했는데 버그많고 비효율적이어서 

빠르게 만드는데 초첨맞추고 두 개를 축소시킴

(components와 API의 차이는 무엇인가?>

components는 화면에 렌더링할 항목이다

API는 (운영체제와 소통하는) 자바스크립트 코드이다)

reactNative 커뮤니티에서 쓸 수도 있지만

expo가 우리에게 필요한 Package를 제공한다.  https://docs.expo.dev/versions/v44.0.0/sdk/async-storage/

여기서는 이미 container View가 Flew container다

모바일에서는 Flex direction 기본값이 colum(열-세로)

(원래 웹에서는 Flex direction 기본값이 Row(행-가로) 였음)

레이아웃에서 대부분 width, height안씀. 반응형 페이지 생각해야함!!! 매번화면 달라지는데말여

React Native에서는 flex 비율로 레이아웃 채워서 씀

결론>

헤더와 푸터를 만들기 위해서 컴포넌트를 만들었는데

헤더랑 푸터 스크립트 안에 또 <Header/>로 컴포넌트 부르고 있어서 그랬다.

삽질>

캐시 지우고 

컴퓨터 고급 설정으로 메모리 더 사용하게 바꾸고

더 큰 메모리 할당하는 방법, 옵션 주는 것도 해봤는데 안됐다. 

따라하면서

순서, 필요한 내용 적기 

<이 순간, 최고의 강의_별점 백개 드립니다_>

https://www.youtube.com/watch?v=re3OIOr9dJI 

client -react 프론트

server -express, 백단

client/ npx create-react-app .

(.은 현재 위치를 의미함)

server/ npm init 

해서 package.json 생성하고

필요한 

mysql express 

설치

client/

Login.js

import { useState } from "react";
import "./login.css";

function Login() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [country, setCountry] = useState("");
  const [position, setPosition] = useState("");
  const [wage, setWage] = useState(0);

  const onChangefun = (event) => {
    setName(event.target.value);
    console.log(event.target.value);
  };
  return (
    <div className="login">
      <div className="information">
        <label>Name : </label>
        <input type="text" onChange={onChangefun}></input>
        <label>Age : </label>
        <input
          type="number"
          onChange={(event) => {
            setAge(event.target.value);
          }}
        ></input>
        <label>Country : </label>
        <input
          type="text"
          onChange={(event) => {
            setCountry(event.target.value);
          }}
        ></input>
        <label>Position : </label>
        <input
          type="text"
          onChange={(event) => {
            setPosition(event.target.value);
          }}
        ></input>
        <label>Wage: </label>
        <input
          type="number"
          onChange={(event) => {
            setWage(event.target.value);
          }}
        ></input>
        <button>직원 등록</button>
      </div>
    </div>
  );
}

export default Login;

server/

index.js

const express = require("express");
const app = express();

app.listen(3001, () => {
  console.log("your server is running on 3001~! yeah");
});

이제 mysql 설정해줄거임

mysql 워크벤치에서 

스키마 생성

테이블 생성

server/

디비저장 코드 입력

const express = require("express");
const app = express();
const mysql = require("mysql");

const db = mysql.createConnection({
  user: "root",
  host: "localhost",
  password: "비밀번호",
  database: "crudtest",
});

app.post("/create", (req, res) => {
  const name = req.body.frontname;
  const age = req.body.frontage;
  const country = req.body.frontcountry;
  const position = req.body.frontposition;
  const wage = req.body.frontwage;

  db.query(
    "INSERT INTO employees (name, age, country, position, wage) VALUES (?,?,?,?,?)",
    [name, age, country, position, wage],
    //콜백함수
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send("values Inserted");
      }
    }
  );
});

app.listen(3001, () => {
  console.log("your server is running on 3001~! yeah");
});

client/

import { useState } from "react";
import "./login.css";
import Axios from "axios";

function Login() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);
  const [country, setCountry] = useState("");
  const [position, setPosition] = useState("");
  const [wage, setWage] = useState(0);

  const addEmployee = () => {
    Axios.post("http://localhost:3001/create", {
      frontname: name,
      frontage: age,
      frontcountry: country,
      frontposition: position,
      frontwage: wage,
    }).then(() => {
      console.log("success");
    });
  };

  const onChangefun = (event) => {
    setName(event.target.value);
    console.log(event.target.value);
  };
  return (
    <div className="login">
      <div className="information">
        <label>Name : </label>
        <input type="text" onChange={onChangefun}></input>
        <label>Age : </label>
        <input
          type="number"
          onChange={(event) => {
            setAge(event.target.value);
          }}
        ></input>
        <label>Country : </label>
        <input
          type="text"
          onChange={(event) => {
            setCountry(event.target.value);
          }}
        ></input>
        <label>Position : </label>
        <input
          type="text"
          onChange={(event) => {
            setPosition(event.target.value);
          }}
        ></input>
        <label>Wage: </label>
        <input
          type="number"
          onChange={(event) => {
            setWage(event.target.value);
          }}
        ></input>
        <button onClick={addEmployee}>직원 등록</button>
      </div>
    </div>
  );
}

export default Login;

프런트에서 백 전달할때 

우리는 api허용해주기 위해서 cors 라이브러리 사용할거임

npm i cors

server/ index.js 파일에

const cors = require("cors");
app.use(cors());

추가

근데 여전히 막상보면 백으로 못넘어옴

이렇게 req.body 콘솔 찍어보면 

undefined 뜸 

json 미들웨어를 제공안해서였음

프런트에서 보낼때 

index.js/

app.use(express.json());

이거 추가

유튜브영상에서는 이거 추가하면 db넣기 성공했는데 난 안됨. ㅎ

 db에 안들어가고 

에러 뜸

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

이거 mysql에 외부접근안돼서 그런거라고 함  

그래서 이걸로 해결가능하다고 함( 비번 사용해서 db계정사용하게끔 하는 설정인듯!)

+해결방법중에 mysql2쓰는 것도 있음 이번에는 안해봄 

 ALTER user '[유저]'@'localhost' IDENTIFIED WITH mysql_native_password by '[비번]';

 바꿔주기 위해서 mysql로 ㄱㄱ

mysql에 바로 use mysql하면 접속이 안됨

mysql -u root -p도 당연히 안됨

'use'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다

워크벤치 경로로 들어가서 해야함~~~

C:\Program Files\MySQL\MySQL Server 8.0\bin

cd C:\Program Files\MySQL\MySQL Server 8.0\bin

​

mysql -u root -p

이제 mysql켜짐

mysql>

계정 뭐있는지 확인 먼저 함

SELECT user,authentication_string,plugin,host FROM mysql.user;

내가 쓸 root계정 있는거 확인함

 ALTER user '[유저]'@'localhost' IDENTIFIED WITH mysql_native_password by '[비번]';

flush privileges;

index.js 

서버 끄고 다시 실행

node index.js

로 실행

직원등록 눌러서 보내보면 

잘 들어왔다~!~!~!~!~!

이제 우리가 할거는

백-> 프런트로 

정보 가져오는걸 할거임

우리는 필요할 때 정보를 봐야하니까 

client/

//초기에는 빈배열이니까 []로 넣어줌 
 const [employeesList, setEmployeesList] = useState([]);
 //가져올 함수// 백가져온 응답반은걸 콘솔로 보여주겠음 response가져온거의 data로
   const getEmployee = () => {
    Axios.get("http://localhost:3001/employees").then((response) => {
      setEmployeesList(response.data);
    });
  };
  
  
 //버튼
   <div className="showDB">
      //버튼눌렀을 때 가져올 함수 실행
        <button className="showDB-button" onClick={getEmployee}>
          show employees
        </button>
      </div>

server/

app.get("/employees", (req, res) => {
//db에서 employess테이블 다 가져와
  db.query("SELECT * FROM employees", (err, result) => {
    if (err) {
      console.log(err);
    } else {
      res.send(result);
    }
  });
});

버튼 누르면

짠

이건 response임 

object 객체로 가져옴

(status 200 -> 작동한거임)

이안에 우리가 원하는 정보가 잘 담겨져있음

이제 백에서 가져온 것들을 화면에 띄워줄거임

맵함수 사용해서

배열에서 하나씩 꺼내오기 

        <div>
          {employeesList.map((val, index) => {
            return (
              <div className="employee">
                <h3>{val.name}</h3>
                <h3>{val.age}</h3>
                <h3>{val.country}</h3>
                <h3>{val.position}</h3>
                <h3>{val.wage}</h3>
              </div>
            );
          })}
        </div>

성공~~~

근데 다른 방법도 있대 

post에 넣고 바로 화면에 띄우게 하는법

const addEmployee = () => {
    console.log(name, "dfdfd");
    Axios.post("http://localhost:3001/create", {
      frontname: name,
      frontage: age,
      frontcountry: country,
      frontposition: position,
      frontwage: wage,
    }).then(
      //   () => {
      //   console.log("success");
      // }
      () => {
        //기존 배열에 방금 입력한 걸 추가하고 그걸 setEmployessList함수에 넣음! 배경은 뜨는데 값이 안띄워지네..흠
        //암튼 여러 방법이 있다고 함 있다가 해보자
        setEmployeesList([
          ...employeesList,
          {
            frontname: name,
            frontage: age,
            frontcountry: country,
            frontposition: position,
            frontwage: wage,
          },
        ]);
      }
    );
  };

나는 왜인지 빈값만 뜸

db에는 잘들어갔는데...

왜 안뜨는 것인가...

이부분은 다른 날에 해보겟음

이제 

삭제 하고 수정하고 다음에 해봐야지

db에서 가져온 목록 선택해서 나열하게 하고

이런 것도 해보고 싶네 

아 그리고 지금은 새로고침하면 db에서 블러온 애들이 화면에서 사라지거든

그것도 막아야겠다.

state변경할 때 모든 code들은 항상 다시 실행됨

근데 api가져와서 쓸때를 예를 들면 매번 다시 가져오면 번거로워지지

몇몇 코드를 처음에 딱 한번만 실행되고 다시 실행안되게 하고 싶음

useEffect(우리가 실행시킬함수,[변경되는지 지켜볼애])

처음 렌더링됐을 때 한번만 실행되고

버튼 눌러서 state바뀔 때 실행되지 않음

+코드제어

클릭할때 keyword 검색코드 다시 실행안되게 막기

키워드를 검색할 때만 실행되게 하기

[keyword]로 넣어서 이 keyword  state값이 변경될때만 이 코드 실행됨

조건으로 keyword가 비어있고 keyword길이가 5이상일때만 실행되게 하였음

처음에는 실행안됐고

검색창에 6자넣으니까 실행됨 

---

[] 아무것도 지켜보지 않거나

[keyword] 키워드 변경하는지 보거나

[keyword, counter] 둘다 변경하는지 보거나 (둘중 하나 변경될때 실행)

이렇게 쓸 수 있음

npm i prop-types

   https://react.vlpt.us/basic/12-variable-with-useRef.html

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 조회 할 수 있습니다.

나는 일단

리액트도 실행될때 전체 컴포넌트들 다 렌더링돼서

부분만 렌더링해주려고 useRef 쓴다라고 이해했지

https://www.daleseo.com/react-hooks-use-ref/

useRef 사용하기

useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당합니다. 이 current 속성은 값을 변경해도 상태를 변경할 때 처럼 React 컴포넌트가 다시 랜더링되지 않습니다. React 컴포넌트가 다시 랜더링될 때도 마찬가지로 이 current 속성의 값이 유실되지 않습니다.

useRef 훅 함수가 반환하는 객체의 이러한 독특한 성질을 이용하여 startCounter()와 stopCounter() 함수를 구현해보았습니다.

https://homzzang.com/b/js-1381

https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

완료되면 App.js에서 import문에 다음을 추가합니다.

import React ,{Component} from 'react';

import { BrowserRouter,Route, Link,Switch } from "react-router-dom";

import된 BrowserRouter, Route, Link, Switch는

• BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터입니다.
• Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다.
• Link - 'a'태그와 비슷합니다. to속성에 설정된 링크로 이동합니다. 기록이 history스택에 저장됩니다.
• Switch - 자식 컴포넌트 Route또는 Redirect중 매치되는 첫 번째 요소를 렌더링합니다. Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링한다는 점을 보장해줍니다.
  사용하지 않을 경우 매칭되는 모두를 렌더링합니다.

https://react.vlpt.us/mashup-todolist/01-create-components.html

이거 보고 투두리스트 만드는 중인데 

  Line 4:10:  'MdDone' is defined but never used    no-unused-vars
  Line 4:18:  'MdDelete' is defined but never used  no-unused-vars

컴포넌트만 생성하고 안에 변수 안넣어서 안뜨는 거였다!ㅎㅎㅎ삽질좋아

아까는 

모듈문제인 주 알고 react-icon 다시깔고 그랬네

그거 다시 까니까 styled-component 모듈 찾을 수 없대서 또 다시깔았어..

(참고로 투두리스트 시작할때 styled-component모듈 깔아도 안된다길래 뭐지 했는데 

버전 문제였음 5.0.0로 하니까 잘되더라. 이놈의 버전에러)

yarn add styled-components@5.0.0

모듈깔때 다른 것도 삭제되기도 하나보네 

그것만 삭제하고 다시 깔아야되는데 그냥 해서 그런가..

한번에 이렇게 스타일 여러 개 줄 수 있는 거 좋다

컴포넌트를  app.js말고

다른 컴포넌트 안에 넣는 경우도 있는데 만들면서 경로 잘봐야겠다!!

얘를 들면 Todolist 에 들어가는 TodoItem 같은 경우

https://velog.io/@jary/flex%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC

margin: 0 auto;

근데 이게 안될때도 있어. 

왜 안되는지 잘 모르겠어

가장 일반적인 방법은 상위 엘리먼트의 margin값을 0 auto를 주어서 왼쪽과 오른쪽을 자동으로 설정하여 중앙 정렬하는 방법이다.
여기서 단점은 상위 엘리먼트의 width값을 명시를 해주어야 적용이 된다는 것이다. 또한 수평정렬만 가능하다는 점..

라고 한다.

flex 이용하는 방법도 있더라

display로 가운데 줬는데

앞에가 이상하게 떨어져있길래 

마진이랑 패딩 0 줬더니 깔끔하게 중앙배열됨

https://developer.mozilla.org/ko/docs/Web/CSS/flex-direction

이것도 봐라~

scss 써보려고 깔았는데 계속 안돼서 찾아보니까 버전문제...ㅎ

이전거 삭제하고
$ npm uninstall node-sass
깔고
$ npm install node-sass@5.0.0

나는 yarn으로 하고 있으니까 이걸로
삭제하고
$ yarn remove node-sass
깔고
$ yarn add node-sass@5.0.0

이제 잘뜸~

출처: https://domdom.tistory.com/55

아 그리고 아까 경로잘못설정해서 오류 나더라 

컴포넌트 login 만들었으니까

여기 넣어야되지 않을까 했지만 

아니었음 오류원인!

App.js 에 들어가줘야함

이제 잘뜸요

https://react.vlpt.us/basic/04-jsx.html 에서 발췌함

리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX 라고 부릅니다.

JSX 는 리액트에서 생김새를 정의할 때, 사용하는 문법입니다. 얼핏보면 HTML 같이 생겼지만 실제로는 JavaScript 입니다.

꼭 지켜야하는 규칙

• 태그 닫아야함

• 두개 이상의 태그는 무조건 하나의 태그로 감싸야함

JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줍니다.

camelCase 형태로 네이밍 해주어야 합니다

https://ko.reactjs.org/docs/hooks-state.html 에서 발췌

Hook이란?

React의 useState Hook을 사용해봅시다!

Hook이란? Hook은 특별한 함수입니다. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다!

언제 Hook을 사용할까? 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다.

state 변수 선언하기

클래스를 사용할 때, constructor 안에서 this.state를 { count: 0 }로 설정함으로써 count를 0으로 초기화했습니다.

함수 컴포넌트는 this를 가질 수 없기 때문에 this.state를 할당하거나 읽을 수 없습니다. 대신, useState Hook을 직접 컴포넌트에 호출합니다.

useState를 호출하는 것은 무엇을 하는 걸까요? “state 변수”를 선언할 수 있습니다. 위에 선언한 변수는 count라고 부르지만 banana처럼 아무 이름으로 지어도 됩니다. useState는 클래스 컴포넌트의 this.state가 제공하는 기능과 똑같습니다. 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않습니다.

useState의 인자로 무엇을 넘겨주어야 할까요? useState()Hook의 인자로 넘겨주는 값은 state의 초기 값. 함수 컴포넌트의 state는 클래스와 달리 객체일 필요는 없고, 숫자 타입과 문자 타입을 가질 수 있습니다. 위의 예시는 사용자가 버튼을 얼마나 많이 클릭했는지 알기를 원하므로 0을 해당 state의 초기 값으로 선언했습니다. (2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야 합니다.)

useState는 무엇을 반환할까요? state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다. 이것이 바로 const [count, setCount] = useState()라고 쓰는 이유입니다. 클래스 컴포넌트의 this.state.count와 this.setState와 유사합니다. 

이제 useState를 이용하여 많은 것을 만들 수 있습니다.

count라고 부르는 state 변수를 선언하고 0으로 초기화합니다. React는 해당 변수를 리렌더링할 때 기억하고, 가장 최근에 갱신된 값을 제공합니다. count 변수의 값을 갱신하려면 setCount를 호출하면 됩니다.

import React, { useState } from "react";
//여기서 useState가 Hook

//https://ko.reactjs.org/docs/hooks-overview.html

//버튼클릭시 값 증가

function Example() {
  //'count'라는 새 상태 변수를 선언
  //0은 초기값
  const [count, setCount] = useState(0);
  //하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수 있음
  const [age, setAge] = useState(10);
  const [fruit, setFruit] = useState("banana");
  //   const [toDos, setToDos] = useState([{ text: "Learn Hooks" }]);  //여기

  return (
    <div>
      <p>You clicked {count}times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <h3>나이{age}살부터 사용가능</h3>
      <button onClick={() => setAge(age * 2)}>Click me</button>
      <h3>우리가 먹을 과일은:{fruit}</h3>
      <button onClick={() => setFruit(fruit + "apple")}>과일추가</button>
      {/* <h3>뭔데 넌{toDos}</h3>
      <button onClick={() => setToDos(toDos + "add")}>텍스트추가요</button> 여기추가하면 왜안되지*/}
    </div>
  );
}

export default Example;

왜 저 todos는 안될까 에러떠

혹시 카멜표기 때문인가 싶어서 대문자 넣어봤는데 아니더라고

✌️ Hook 사용 규칙

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.

• 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
• React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다~~~)

<자료여기서 봐야지~>

더북 제로초 https://thebook.io/080203/ch03/04/02/03/

리액트 프로그래밍 정석 저자 박호준 깃허브

https://github.com/saseungmin/react-tutorial

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

(노드js 깔려있으니까 넘어가고)

yarn 설치

cmd창에서 전역으로 깔아줌 (한번깔고 말게)

npm install -g yarn

리액트 앱 생성하기

cd 위치

로 폴더 만들어놓을 위치들어가고

yarn create react-app 폴더명

구동할때는 

yarn start

1. 숙제 각각의 메서드들이 어떤 역할을 하는가?
constructor , gerDerivedStateFromProps, render, componentDidMount

 https://velog.io/@cyranocoding/React-Life-Cycle-%EC%8B%9C%EB%A6%AC%EC%A6%88Mount-%ED%8E%B8

 https://ko.reactjs.org/docs/getting-started.html

클래스 해보기

10/20

1. 숙제 각각의 메서드들이 어떤 역할을 하는가?
constructor , gerDerivedStateFromProps, render, componentDidMount

10/21

숙제: 컴포넌트 만들어서...  1. map함수 사용해서 목록렌더링(이미지도 렌더링해보고) 2. 틱택토 주르륵~ 자습서 3.hooks종류정리(useState, useEffect) 

4. 리액트 todolist 만들기...언제ㅔㄴ간 해보기..

//리액트에서 가장 중요한 것...

-상태관리

-렌더링 최적화 기법들

-서버사이드렌더링