DAY 74 - React (2024.10.22)

React

리액트란?

리액트 공식 홈페이지: https://react.dev/

React

 

• 사용자 인터페이스(UI)를 구축하기 위해 메타(페이스북)에서 개발한 Javascript 기반의 라이브러리

 

• SPA(Single Page Application) 개발에 가장 적합한 라이브러리

 

• 화면상에 데이터가 변경되는 경우 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 렌더링 할 수 있다.

 

• 웹 앱(Web App) 또는 네이티브 앱(Native App)

 

• 유지보수를 쉽게, DOM 관리

 

• 성능 최적화 쉽게

 

• 컴포넌트 단위로 구성하여 코드 재사용성이 높으며, 독립적인 유지보수 가능

 

• 대부분 공식 라이브러리가 없음 (높은 자유도)

 

• 자바스크립트 친화적 ES6 기반로 배우기가 쉽다

 

---

리액트 컴포넌트

•  컴포넌트는 UI를 구성하는 조각(piece)에 해당하며,

    독립적으로 분리되어 재사용이 됨을 목적으로 사용 된다.

 

•  React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리한다.

   (재사용성, 갖다 쓸 수 있다.)

   도커에서 컨테이너와 비슷하다. 여기서는 컴포넌트

 

 

---

함수형 컴포넌트

•  React 컴포넌트는 개념상 JavaScript 함수와 유사하다.

 

•  컴포넌트 외부로부터 속성(props)을 전달받아 어떻게 UI를 구성해야 할지 설정하여

    React 요소 (JSX를 Babel이 변환 처리)로 반환한다.

    (자바스크립트를 JSX로 변환해주는 역할을 Babel이 하는 것)

 

•  이러한 문법 구문을 사용하는 컴포넌트를 React는 '함수형(functional)'으로 분류한다.

---

JSX 규칙 : JavaScript + XML

•   JSX는 리액트에서 사용하는 파일로 JavaScript 코드 안에 HTML과 유사한 코드를 작성할 수 있게 해 준다. •   JSX는 리액트 컴포넌트를 작성하면서 return 문에 사용하는 문법이다.

•   브라우저에서 직접 실행되지 않으며, Babel과 같은 변환기를 통해 Javascript로 변환 후 실행한다.

 

•   JSX가 하는 일은 React 요소(Element)를 만드는 것이다.

•   얼핏 보면 JSX는 JavaScript 문법 확장(JavaScript eXtension) 으로 구문이 HTML과 유사하다.

    하지만 React 요소는 실제 DOM 요소가 아니라, JavaScript 객체이다.

•   리액트 자체 빌드 도구 덕분에 *.js, *.jsx로 작성해도 아무런 문제 없이 실행은 가능하나

     jsx파일로 컴 포넌트 만들 것을 권장한다.

---

규칙

1. 태그는 반드시 닫아줘야 한다.

2. 최상단에서는 반드시 div로 감싸주어야 한다. ( Fragment 사용, <> 상황에 따라 )

3. JSX안에서 자바스크립트 값을 사용하고 싶을 때는 { }를 사용한다.

    변수값 출력 예시 참고 -> { name }

4. 조건부 렌더링을 하고 싶으면 &&연산자나 삼항 연산자를 사용한다.

5. 인라인 스타일링은 항상 객체형식으로 작성한다.

    스타일 작성 시 – 빼고 첫 글자는 대문자로 작성한다.

6. 별도의 스타일 파일을 만들었으면 class 대신 className을 사용한다. ( 권장사항 )

7. 주석은 {/*    */}을 사용해 작성한다.

---

[실습] 첫 번째 : React 프로젝트 생성

Project : day01

① Ctrl + backtick(`) - 터미널 열기

---

② npx create-react-app day01

---

[ 해결 방법 - 첫 번째 또는 두 번째 방법으로 해결해본다 ] -- 보통 첫 번째로 된다.

첫 번째 방법 => C:\Program Files\nodejs\node_modules 안의 npm 폴더를

                          C:\Users\bitcamp\AppData\Roaming\에 복사한다.

---

두 번째 방법 => Node를 제거하고 다시 설치해본다. ※ Nodejs 삭제 (이건 안 해봄)

① 제어판 - 프로그램 삭제

② 아래의 경로를 찾아서 모두 삭제

C:\Program Files (x86)\Nodejs

C:\Program Files\Nodejs

C:\Users\User\AppData\Roaming\npm

C:\Users\User\AppData\Roaming\npm-cache

---

npx create-react-app day01 다시 치기

---

밑에꺼 또 입력하기

cd day01

npm start -- 서버를 키는 것

---

[실습] 두 번째 : React 프로젝트 생성

Project : day01_vite

 

Vite 활용 방식

•    기존 방식은 세팅에 시간이 오래 걸리고 다소 무겁다는 특징이 있다.

•    Vite를 이용하면 세팅도 빠르고 개발 단계에서도 수정사항을 빠르게 반영하여 실행 화면을 업데이트 해주기 때문에 매우 유용하다.

•    Vite 사용을 위해선 Node.js가 설치되어 있어야 한다.

 

※ Vite

Frontend 개발을 위해 설계된 빌드도구.

빠른 개발 환경을 제공하며, React, Vue, Svelte 등 다양한 프레임워크를 지원

---

① Ctrl + backtick(`) - 터미널 열기

 

쭉 따라치기

② npm create vite@latest day01_vite (위치 workspace에서 해야함 !!)

React(선택)

JavaScript (선택)

 

cd .\day01_vite\

npm install (1번만)

npm run dev

http://localhost:5173/

---

총 정리

[첫 번째]

cd day01

npm start -- 서버를 켠다

 

[두 번째]

cd .\day01_vite\

npm install (1번만)

npm run dev

 

작업 끝내는 법: ctrl+c해서 y

 

usb나 email로 해서 프로젝트 갖고싶을 때

 

node_modules가 너무 크다. 그러므로 얘를 제거를 한다. 그럼 용량 작아진다.

하지만 집에서 복사해서 갖다놓으면 node_modules가 없기 때문에 실행이 안된다.

---

npm을 다시 install해준다

npm i

 

 

다시 npm start하면 실행된다 !!

---

---

App.js 안에 있는 내용 다 지우고

rsc 치고 enter

import React from 'react';

const App = () => {
  return (
    <div>
      
    </div>
  );
};

export default App;

---

App.js

import React from 'react';

const App = () => {
  return (
    <div>
      <h3>Hello React</h3>
    </div>
  );
};

export default App;

 

화면에는 index.html이 뜨고

App.js 영역이 껴들어가는 것이다 !!

---

index.js가 중간다리 역할을 한다.

 

day01

      public

              index.html --- index.html (최종적으로 화면에 뜨는 건 이거 !!)

      src (우리가 작업하는 위치)

                components

                       Dog.js

                       Test01.js

                       Test02.js 

       App.js - main 이다 -- App.jsx (html 안의 내용을 채워주는 건 이거 !!)

       index.js --- index.jsx

 

day01_vite

위에꺼랑 똑같은데 jsx 이것만 바뀐거다 !

---

index.html은 화면에 띄워주는 역할이니 건들지 말고 / index.js도 안 건든다.

우리가 건들 거는 App.js !!

여기는 자바스크립트 영역 (js)

주석은 // /* */ 이렇게 걸면된다.

---

 

return 되는 부분이 jsx 영역이다.

그래서 화면에 띄우는 것이다 !

---

day01

     src

         components 

              Dog.jsx

 

파일 생성하고 rsc 치고 enter하면 

import React from 'react';

const Dog = () => {
    return (
        <div>
            
        </div>
    );
};

export default Dog;

---

import React from 'react';

const Dog = () => {
    return (
        <div>
            <h1>Dog 컴포넌트</h1>
        </div>
    );
};

export default Dog;

부르지 않았기 때문에 안 뜬다 !!

App.js에 부르러 가자 !

---

App.js

import Dog from './components/Dog';
<Dog />

import React from 'react';
import Dog from './components/Dog';

const App = () => {
  return (
    <div>
      <h3>Hello React!!</h3>
      <h2/>
      <Dog />
    </div>
  );
};

export default App;

---

import React from 'react';
import Dog from './components/Dog';

const App = () => {
  return (
    <div>
      <h3>Hello React!!</h3>
      <hr />
      <Dog />
      <hr />
      <Dog />
    </div>
  );
};

export default App;

---

{/* 최상단에는 반드시 <div></div>로 감싸야한다.*/}

이런식으로 엄청 많이 들어간다.

 

import React from 'react';
import Dog from './components/Dog';

const App = () => {
  return (
    <> {/* 최상단에는 반드시 <div></div>로 감싸야한다.*/}
      <h3>Hello React!!</h3>
      <hr />
      <Dog />
      <hr />
      <Dog />
    </>
  );
};

export default App;

이렇게 하나라도 삭제하기

저 둘 사이에 있던 div 사라진거 볼 수 있다.

---

Test01.jsx

import React from 'react';

const Test01 = () => {
    return (
        <div>
            <h3>JSX 영역</h3>
            <p>태그를 열면 반드시 닫아야 한다.</p>
        </div>
    );
};

export default Test01;

---

App.js

import Test01 from './components/Test01';

<Test01/>

import React from 'react';
import Dog from './components/Dog';
import Test01 from './components/Test01';

const App = () => {
  return (
    <> {/* 최상단에는 반드시 <div></div>로 감싸야한다.*/}
      <h3>Hello React!!</h3>
      <hr />
      <Dog />
      <hr />
      <Dog />
      <hr/>
      <Test01/>
    </>
  );
};

export default App;

---

Test02.jsx

반드시 return 시켜줘야 바벨이라는 아이가 잡아서 넘겨준다.

여기서는 $ 안 쓰고 / 자바스크립트에 있는거 부를 때는 { }으로 한다는 점 !!

import React from 'react';

const Test02 = () => {
    //함수 영역 - 조건문, 제어문 등 사용 가능
    let title = '신상명세서';
    const name = '홍길동';
    const age = 25;
    const addr = '서울';

    return (
        <>
            <h2>JSX 영역</h2>
            <h3>{title}</h3>
            <ul>
                <li>이름 : { name }</li>
                <li>나이 : { age }</li>
                <li>주소 : { addr }</li>
            </ul>
        </>
    );
};

export default Test02;

---

App.js

import Test02 from './components/Test02';
<Test02/>

import React from 'react';
import Dog from './components/Dog';
import Test01 from './components/Test01';
import Test02 from './components/Test02';

const App = () => {
  return (
    <> {/* 최상단에는 반드시 <div></div>로 감싸야한다.*/}
      <h3>Hello React!!</h3>
      <hr />
      <Dog />
      <hr />
      <Dog />
      <hr/>
      <Test01/>
      <hr/>
      <Test02/>
    </>
  );
};

export default App;

---

App.js 

조건문 쓸 때

<li>나이 : { age }살 {age > 19 ? '성인' : '청소년' }</li>

import React from 'react';

const Test02 = () => {
    //함수 영역 - 조건문, 제어문 등 사용 가능
    let title = '신상명세서';
    const name = '홍길동';
    const age = 25;
    const addr = '서울';

    return (
        <>
            <h2>JSX 영역</h2>
            <h3>{title}</h3>
            <ul>
                <li>이름 : { name }</li>
                <li>나이 : { age }살 {age > 19 ? '성인' : '청소년' }</li>
                <li>주소 : { addr }</li>
            </ul>
        </>
    );
};

export default Test02;

---

App.js 

style 걸어줄 때

<li style={{color: 'red'}}>주소 : { addr }</li>

중괄호 두 개인거 체크 !

import React from 'react';

const Test02 = () => {
    //함수 영역 - 조건문, 제어문 등 사용 가능
    let title = '신상명세서';
    const name = '홍길동';
    const age = 25;
    const addr = '서울';

    return (
        <>
            <h2>JSX 영역</h2>
            <h3>{title}</h3>
            <ul>
                <li>이름 : { name }</li>
                <li>나이 : { age }살 {age > 19 ? '성인' : '청소년' }</li>
                <li style={{color: 'red'}}>주소 : { addr }</li>
            </ul>
        </>
    );
};

export default Test02;

 

---

<style>

ul  {

      color: red; (css 문법은 항상 ;세미콜론으로 마무리해줘야한다.)

      background-color: yellow;

      font-size: 30pt;

}

ul 태그 안에 css를 하는건데

 

우리는 json 객체화시키겠다는 것 !!

css와 다르게 문자열은 ' ' 싱글따옴표 또는 더블따옴표를 찍어서 문자를 구분해줘야하고

,쉼표를 찍어줘야한다.

 

위에 css에서는 - 로 연결해줬다. 다시 소문자가 나오게 했지만

여기서는 대문자로 첫글자를 적어서 연결해준다.

 

fontSize에서 숫자만 적으면 그냥 적으면되고 30pt를 적을 때는 또 싱글따옴표를 붙여야한다.

    const css1 = {
        color: 'red',
        backgroundColor: 'yellow',
        fontSize: '30pt',
        padding: 20,
        margin: 10,
        border: '3px solid #000'
    };

<h3 style={css1}>{title}</h3>

---

    const css2 = {
        width: 400,
        color: '#fff',
        backgroundColor: 'hotpink',
        fontSize: 20,
        padding: 15,
        margin: 30
    };

<li style={css2}>이름 : { name }</li>

---

 <li style={{backgroundColor: 'greenyellow',
             padding: 15,
             margin: 'auto'}}>
      나이 : { age }살 {age > 19 ? '성인' : '청소년' }</li>

---

alt + shift + 방향키 = 복제

Test03.jsx

import React from 'react';

const Test03 = () => {
    return (
        <>
           <h1>class 속성 적용</h1>
           <div>
                <article>test</article>
                <article>test</article>
                <article>test</article>
            </div> 
        </>
    );
};

export default Test03;

---

App.js

import Test03 from './components/Test03';
<Test03/>

import React from 'react';
import Dog from './components/Dog';
import Test01 from './components/Test01';
import Test02 from './components/Test02';
import Test03 from './components/Test03';

const App = () => {
  return (
    <> {/* 최상단에는 반드시 <div></div>로 감싸야한다.*/}
      <h3>Hello React!!</h3>
      <hr />
      <Dog />
      <hr />
      <Dog />
      <hr/>
      <Test01/>
      <hr/>
      <Test02/>
      <hr/>
      <Test03/>
    </>
  );
};

export default App;

---

css파일 따로 빼기

Test.css

.con-box {
    width: 500px;
    display: flex;
}

.con-box article {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background: tomato;
    margin: 5px;
}

---

Test03.jsx

className이 class 속성이다.

<link href="./Test.css"/> 이런거 안먹는다.

 

import './Test03.css'; 이렇게 해줘야한다.

import React from 'react';
import './Test03.css';

const Test03 = () => {
    return (
        <>
           <h1>class 속성 적용</h1>
           <div className='con-box'>
                <article>test</article>
                <article>test</article>
                <article>test</article>
            </div> 
        </>
    );
};

export default Test03;

---

Test04.jsx

import React from 'react';

const Test04 = () => {
    return (
        <div>
            
        </div>
    );
};

export default Test04;

---

App.js

import Test04 from './components/Test04';
<Test04/>

import React from 'react';
import Dog from './components/Dog';
import Test01 from './components/Test01';
import Test02 from './components/Test02';
import Test03 from './components/Test03';
import Test04 from './components/Test04';

const App = () => {
  return (
    <> {/* 최상단에는 반드시 <div></div>로 감싸야한다.*/}
      <h3>Hello React!!</h3>
      <hr />
      <Dog />
      <hr />
      <Dog />
      <hr/>
      <Test01/>
      <hr/>
      <Test02/>
      <hr/>
      <Test03/>
      <hr/>
      <Test04/>
    </>
  );
};

export default App;

---

Cat.jsx

import React from 'react';

const Cat = () => {
    return (
        <div>
            <h3>고양이</h3>
        </div>
    );
};

export default Cat;

---

Lion.jsx

import React from 'react';

const Lion = () => {
    return (
        <div>
            <h3>사자</h3>
        </div>
    );
};

export default Lion;

---

Test04.jsx

밑으로 Cat.jsx와 Lion.jsx과 상속관계로 들어온다.

import React from 'react';
import Cat from './Cat';
import Lion from './Lion';

const Test04 = () => {
    return (
        <div>
            <Cat/>
            <Lion/>
        </div>
    );
};

export default Test04;

---

자식에서 자식으로 데이터 보내는 건 안 된다.

부모한테서 자식으로만 전달이 가능하다.

 

                                             App.js

Dog.jsx                Test01.jsx             Test02.jsx                Test04.jsx

                                                                                  Cat.jsx        Lion.jsx     

Test01.jsx에 있는 데이터를 Test02.jsx한테 주고싶으면

부모한테 데이터를 넘겨주고 부모인 App.js에서 Test02.jsx한테 줘야한다.

옆으로는 절대 못준다.

부모를 걸쳐서 줘야한다.

그러므로 누가 누구의 부모인지 상속관계를 반드시 알아야한다 !!

 

Test01.jsx가 Cat.jsx한테 데이터 주고싶으면

Test01.jsx ---> App.js ---> Test04.jsx ---> Cat.jsx 이런식으로 줘야한다.

이렇게하면 미친다 !! 그래서 마지막에 나오는게 리덕스(?)이다.

데이터 공유할 수 있는 공간을 따로잡고 나중에 얘가 모든데이터를 뿌려버리는 녀석이다.

---

Props

Props란?

•  properties의 약자로 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터(객체, 배열 등)나 함수이다.

•  컴포넌트 간의 데이터를 전달하기 위해 사용되는 리액트 객체이다.

 

보내는 방법

•  import 한 컴포넌트 태그 내에 속성이름=값 형태로 작성하여 전달

•  여러 개의 값 전달할 때는 중괄호 안에 전달받는 속성 이름을 콤마(,)로 구분하여 나열

•  숫자를 보내는 경우 {} 안에 작성

•  JavaScript Object로 전달하는 데이터는 {{ }} 중괄호 2개를 사용하여 내부에 이름과 값을 작성한다.

 

받는 방법

•  부모로부터 전달받은 props를 직접 받으려면 { } 안에 속성 이름 작성한다.

•  함수의 매개변수를 props로 작성한 다음 props.속성이름 형태로 값을 사용할 수 있다.

---

Test04.jsx

<Cat 변수명=값/>

<Cat name='고양이'/>

부모가 자식한테 고양이하고 보내면 자식은 받아야한다.

import React from 'react';
import Cat from './Cat';
import Lion from './Lion';

const Test04 = () => {
    return (
        <div>
            <Cat name='고양이'/>
            <Lion/>
        </div>
    );
};

export default Test04;

---

Cat.jsx

Cat.jsx에서는 props라고 받아주는 것이다.

(자바에서는 request.getParameter로 받거나 / param.name 이렇게 받았던 거랑 같은 거다.)

props.name -- props에 있는 name를 출력해라

import React from 'react';

const Cat = (props) => {
    return (
        <div>
            <h3>나는 {props.name} 고양이 컴포넌트입니다.</h3>
        </div>
    );
};

export default Cat;

---

Test04.jsx

import Lion from './Lion';
<Lion name='사자'/>

import React from 'react';
import Cat from './Cat';
import Lion from './Lion';

const Test04 = () => {
    return (
        <div>
            <Cat name='고양이'/>
            <Lion name='사자'/>
        </div>
    );
};

export default Test04;

---

Lion.jsx

import React from 'react';

const Lion = (props) => {
    const {name} = props;
    return (
        <div>
            <h3>나는 {name} 컴포넌트이다.</h3>
        </div>
    );
};

export default Lion;

---

Test04.jsx

import Person from './Person';
<Person name='홍길동' age='25' />

import React from 'react';
import Cat from './Cat';
import Lion from './Lion';

const Test04 = () => {
    return (
        <div>
            <Cat name='고양이'/>
            <Lion name='사자'/>
            <Person name='홍길동' age='25' />
        </div>
    );
};

export default Test04;

 

나의 이름은 홍길동이고, 나이는 25살입니다.

=> <h3></h3>태그로 잡아주고

=> 홍길동 이름만 파란색으로 처리하기 !!

---

Person.jsx

import React from 'react';

const Person = ({name, age}) => {

    return (
        <div>
            <h3>나의 이름은 <span style={{color: 'blue'}}>{ name }</span>이고, 나이는 { age }살 입니다.</h3>
        </div>
    );
};

export default Person;

---

App.js

import Test05 from './components/Test05';
<Test05/>

import React from 'react';
import Dog from './components/Dog';
import Test01 from './components/Test01';
import Test02 from './components/Test02';
import Test03 from './components/Test03';
import Test04 from './components/Test04';
import Test05 from './components/Test05';

const App = () => {
  return (
    <> {/* 최상단에는 반드시 <div></div>로 감싸야한다.*/}
      <h3>Hello React!!</h3>
      <hr />
      <Dog />
      <hr />
      <Dog />
      <hr/>
      <Test01/>
      <hr/>
      <Test02/>
      <hr/>
      <Test03/>
      <hr/>
      <Test04/>
      <hr/>
      <Test05/>
    </>
  );
};

export default App;

---

Test05.jsx

import React from 'react';
import Test05Sub from './Test05Sub';

const Test05 = () => {
    return (
        <div>
            <Test05Sub name='홍길동'
                       age={ 20 }
                       addr='서울'
                       tel='010-1234-5678'
                       color='tomato'
                       bgcolor='pink'
                       done={ true } />
        </div>
    );
};

export default Test05;

---

Test05Sub.jsx -- 자식

위에서 보낸 값 다 받기 !!

import React from 'react';

const Test05Sub = ({ name, age, addr, tel, color, bgcolor, done }) => {
    return (
        <div>
            <h2>신상명세서</h2>
            <ul style={{color: color, backgroundColor: bgcolor}}>
                <li>이름 : {name}</li>
                <li>나이 : {age}</li>
                <li>주소 : {addr}</li>
                <li>핸드폰 : {tel}</li>
                <li>동의여부 : {done ? '동의' : '비동의'}</li>
            </ul>
        </div>
    );
};

export default Test05Sub;

---

Test05.jsx

<Test05Sub name='코난' addr='부산' color='skyblue' bgcolor='hotpink' />

---

day02

D:\React\workspace> npx create-react-app day02

cd day02

npm start

 

난 계속 이게 떠서

ctrl + c

cd ..

npm install --save-dev @babel/plugin-proposal-private-property-in-object

cd day02

npm start

이렇게 과정을 다시 거쳐야된다ㅠㅠㅠ

---

day02_vite

npm create  vite@latest day02_vite

React

JavaScript

 cd .\day02_vite\

npm install  

npm run dev

http://localhost:5173/ 여기 들어가기

---

day02_vite

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root">화면에 보이는 영역</div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

---

App.jsx에 가서 화면에 있는 거 다 지우고

rsc 치고 enter누르면 화면에 아무것도 안 뜬다 !

import React from 'react';

const App = () => {
  return (
    <div>
      
    </div>
  );
};

export default App;

import React from 'react';
import Test01 from './components/Test01';

const App = () => {
  return (
    <div>
      <Test01/>
    </div>
  );
};

export default App;

---

리엑트는 순수 자바스크립트가 아니다 => 베이스가 자바스크립트일 뿐이다
함수 뒤에 ()를 붙여서 호출하면 새로고침 하자마자 무조건 실행된다.
=> 해결하려면 함수로 한 번 묶어준다.
=> 값을 넘길때는 함수 ex)  () => 함수(값)

 

day02_vite

      src

         App.jsx

         components

                Test01.jsx

이벤트 : on+첫글자는 대문자

import React from 'react';

const Test01 = () => {
    
    const test1 = () => {
        alert('test1');
    }

    return (
        <div>
            <h2>이벤트 : on+첫글자는 대문자</h2>
            <p>
                <button onClick={ test1 }>클릭</button>
                <button>클릭</button>
                <button>클릭</button>
                <button>클릭</button>
            </p>
        </div>
    );
};

test1을 호출할 때 절대 test1( ) 이렇게 호출하면 안 된다 !!

괄호문이 열리면 새로고침하게되면 바로 실행된다.

---

    const test2 = () => {
        alert('test2');
    }

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

---

<button onClick={ test3(10) }>클릭</button> --- 이렇게 하면 새로고침이 되면 바로 실행되므로 밑에처럼 해야한다.

	const test3 = (num) => {
        alert('num = ' + num);
    }

<button onClick={ () => test3(10) }>클릭</button>

---

    const test4 = (num) => {
        alert(`num = ${ num }`);
    }

위에는 자바영역이므로 $ 붙여야한다 !!

 

 <button onClick={ () => test4(20) }>클릭</button>

---

App.js

{/*<Test01/> */} -- 주석걸고

import Test02 from './components/Test02';
<Test02 />

import React from 'react';
import Test01 from './components/Test01';
import Test02 from './components/Test02';

const App = () => {
  return (
    <div>
      {/*<Test01/> */}
      <Test02 />
    </div>
  );
};

export default App;

---

Test02.jsx

arr를 map으로 반복하여 출력

const arr = ['홍길동', '코난', '둘리', '라이언', '네오'];

            <ul>
                {
                    //map을 사용할 때는 반드시 key 속성을 주어야 한다.
                    arr.map((index, item) => {
                       return (<li>{ index } : { item }</li>) 
                    })
                }   
            </ul>

---

unique한 키 값을 주라는 것 !!

return (<li key={ index }>{ index } : { item }</li>) 

            <ul>
                {
                    //map을 사용할 때는 반드시 key 속성을 주어야 한다.
                    arr.map((index, item) => {
                       return (<li key={ index }>{ index } : { item }</li>) 
                    })
                }   
            </ul>

에러 사라짐 !!

map을 사용할 때는 반드시 key 속성을 주어야 한다.

---

data를 map으로 반복하시오

    const data = [
        { id: 1, name: '홍길동'},
        { id: 2, name: '코난'},
        { id: 3, name: '둘리'},
        { id: 4, name: '라이언'},
        { id: 5, name: '네오'}
    ]

            <ul>
                data를 map으로 반복하시오
                {
                    data.map((item) => (<li key={ item.id }>{ item.id } : { item.name }</li>))
                }
            </ul>

중괄호 빼면  return도 빼도 되는 거 !!

---

전체코드

import React from 'react';

const Test02 = () => {
    const title = '신상명세서';
    const arr = ['홍길동', '코난', '둘리', '라이언', '네오'];
    const data = [
        { id: 1, name: '홍길동'},
        { id: 2, name: '코난'},
        { id: 3, name: '둘리'},
        { id: 4, name: '라이언'},
        { id: 5, name: '네오'}
    ]

    return (
        <div>
            <h2>{ title } 값 출력</h2>
            <ul>
                {
                    //map을 사용할 때는 반드시 key 속성을 주어야 한다.
                    arr.map((index, item) => {
                       return (<li key={ index }>{ index } : { item }</li>) 
                    })
                }   
            </ul>
            <hr/>
            <ul>
                {
                    data.map((item) => (<li key={ item.id }>{ item.id } : { item.name }</li>))
                }
            </ul>
        </div>
    );
};

export default Test02;

---

App.js

{/*<Test02/> */} -- 주석걸고

import Test03 from './components/Test02';
<Test03 />

import React from 'react';
import Test01 from './components/Test01';
import Test02 from './components/Test02';
import Test03 from './components/Test03';

const App = () => {
  return (
    <div>
      {/*<Test01/> */}
      {/*<Test02 />*/}
      <Test03/>
    </div>
  );
};

export default App;

---

Hook ?

Hook은 React 16.8버전에 새로 추가되었습니다.
Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.

Hook의 개요

함수형 컴포넌트는 렌더링할때마다 내부의 것들을 기억하지 못한다.
다시 생성, 초기화 해야한다. (변수, 함수 등)

내부의 것들을 유지하기 위해서 hook이 등장했다 - useXXX

useState
- 값이 유동으로 변할 때

보통 값이 정해져있다.

근데 값을 유동적으로 바꾸고싶을 때 useState를 사용하는 것 !!

 

[형식]
const [상태데이터, 상태데이터의 값을 변경해주는 함수] = React.useState(초기값);
const [name, setName]

웹 스토어에서 React Developer Tools (Chrome에 추가)

크롬 창 다시 끄고

http://localhost:5173/ 다시 들어오면 

밑에처럼 들어온거 확인할 수 있다 !!

---

Test03.jsx

import React, { useState } from 'react';
const [name, setName] = useState -- 이걸 쓰게되면 위에 import가 자동으로 걸려야한다 !!

 

import React, { useState } from 'react';

const Test03 = () => {
    const [name, setName] = useState('홍길동');
    return (
        <div>
            <h2>
                이름 : { name }
            </h2>
        </div>
    );
};

 

Test03 더블 클릭하면 밑에처럼 값 있는 거 확인할 수 있다 !!

---

이름을 코난으로 변경하는 함수

<button onClick={ onName }>이름을 코난으로 변경하는 함수</button>

onClick했을 때 onName이라는 함수를 호출한다는 의미 !

 

'홍길동' 을 바꿔주는 함수는 setName이므로 

setName('코난')으로 해서 바꿔야한다.

   const onName = () => {
        setName('코난')
    }

            <p>
                <button onClick={ onName }>이름을 코난으로 변경하는 함수</button>
            </p>

버튼누르니 코난으로 변경된 거 확인할 수 있다 !!

---

나이를 30으로 변경하는 함수

const [age, setAge] = useState(25);

	const onAge = () => {
        setAge(30)
    }

<button onClick={ onAge }>나이를 30으로 변경하는 함수</button>

---

• 다른방법

나이를 30으로 변경하는 함수

    const onAge = (age) => {
        setAge(age)
    }

<button onClick={ () => onAge(30) }>나이를 30으로 변경하는 함수</button>

---

나이를 35으로 변경하는 함수

바로 불러도 된다 !!

 <button onClick={ () => setAge(35) }>나이를 35으로 변경하는 함수</button>

---

CSS 바탕색 지정하기

노란색으로 변경

상태변수 : color

기본값 : cyan

const [color, setColor] = useState('cyan');

    const onColor = () => {
        setColor('yellow')
    }

return (
        <div>
            <h2 style={{backgroundColor: color}}>
                이름 : { name } / 나이 : { age }
            </h2>
            <p>
                <button onClick={ onName }>이름을 코난으로 변경하는 함수</button>
                <button onClick={ () => onAge(30) }>나이를 30으로 변경하는 함수</button>
                <button onClick={ () => setAge(35) }>나이를 35으로 변경하는 함수</button>
                <button onClick={ onColor }>노란색으로 변경</button>
            </p>
        </div>
    );

---

전체코드

import React, { useState } from 'react';

const Test03 = () => {
    const [name, setName] = useState('홍길동');
    const [age, setAge] = useState(25);
    const [color, setColor] = useState('cyan');

    const onName = () => {
        setName('코난')
    }

    const onAge = (age) => {
        setAge(age)
    }

    const onColor = () => {
        setColor('yellow')
    }

    return (
        <div>
            <h2 style={{backgroundColor: color}}>
                이름 : { name } / 나이 : { age }
            </h2>
            <p>
                <button onClick={ onName }>이름을 코난으로 변경하는 함수</button>
                <button onClick={ () => onAge(30) }>나이를 30으로 변경하는 함수</button>
                <button onClick={ () => setAge(35) }>나이를 35으로 변경하는 함수</button>
                <button onClick={ onColor }>노란색으로 변경</button>
            </p>
        </div>
    );
};

---

App.js

{/*<Test03/> */} -- 주석걸고

import Test04 from './components/Test02';
<Test04 />

import React from 'react';
import Test01 from './components/Test01';
import Test02 from './components/Test02';
import Test03 from './components/Test03';

const App = () => {
  return (
    <div>
      {/*<Test01/> */}
      {/*<Test02 />*/}
      {/*<Test03/>*/}
      <Test04/>
    </div>
  );
};

export default App;

---

Test04.jsx

보이기 / 숨기기 => 토글 형식으로 왔다갔다 움직이게 만들 것이다.

상태값에 의해서 보였다 감춰졌다하게 해야한다.

 

isVisible ( is 붙였다는 거는 true / false로 해서 체크하겠다는 것이다~)

visible = false => 보이기 버튼 뜨게
visible - true => 숨기기 버튼 뜨게

import React, { useState } from 'react';

const Test04 = () => {
    const [visible, isVisible] = useState(false);

    const onToggle = () => {
        isVisible(!visible)
    }

    return (
        <div>
            <button>보이기</button>
            <button>숨기기</button>
            <button onClick={ onToggle }>{visible ? '숨기기' : '보이기'}</button>    
        </div>
    );
};

export default Test04;

---

            {
                <div style={{width: 300, height: 100, margin: 20, backgroundColor: 'hotpink'}}></div>
            }

 

보이기 버튼 누르면 보이게

숨기기 버튼 누르면 숨겨지게 하기 !!

    const onShow = () => {
        isVisible(true)
    }

    const onHide = () => {
        isVisible(false)
    }

    <button onClick={ onShow }>보이기</button>
    <button onClick={ onHide }>숨기기</button>

        {
            //조건 ? 참 : 거짓
            visible ? <div style={{width: 300, height: 100, margin: 20, backgroundColor: 'hotpink'}}></div> : null
        }

---

위에서 거짓이면 null값 뜨게 하는 것보다 아래 방식을 더 좋아한다 !

        {
            //현재조건이 &&(참)이면 수행하도록 !!
            visible && <div style={{width: 300, height: 100, margin: 20, backgroundColor: 'cyan'}}></div>
        }

---

전체코드

import React, { useState } from 'react';

const Test04 = () => {
    const [visible, isVisible] = useState(false);

    const onToggle = () => {
        isVisible(!visible)
    }

    const onShow = () => {
        isVisible(true)
    }

    const onHide = () => {
        isVisible(false)
    }

    return (
        <div>
            <button onClick={ onShow }>보이기</button>
            <button onClick={ onHide }>숨기기</button>
            <button onClick={ onToggle }>{visible ? '숨기기' : '보이기'}</button> 
            <hr/>
            {
                //조건 ? 참 : 거짓
                visible ? <div style={{width: 300, height: 100, margin: 20, backgroundColor: 'hotpink'}}></div> : null
            }   
            <hr/>
            {
                //현재조건이 &&(참)이면 수행하도록 !!
                visible && <div style={{width: 300, height: 100, margin: 20, backgroundColor: 'cyan'}}></div>
            } 
        </div>
    );
};

export default Test04;

---

Test05.jsx

import React, { useState } from 'react';

const Test05 = () => {
    const [num, setNum] = useState(0);

    const onAdd = () => {
        setNum(num + 1);
    }

    const onSub = () => {
        setNum(num - 1);
    }

    const onReset = () => {
        setNum(0);
    }
    return (
        <div>
            <h2>숫자 : { num }</h2>
            <p>
                <button onClick={ onAdd }>1씩 증가</button>
                <button onClick={ onSub }>1씩 감소</button>
                <button onClick={ onReset }>초기화</button>
            </p>
        </div>
    );
};

export default Test05;

---

---

Folder: css

Test06.css

caption {position: absolute; text-indent: -9999em;}
.list {width: 600px; margin: 10px auto;}  
.list .seq {width: 10%;}  
.list .name {width: 20%;}  
.list .age {width: 25%;}  
.list .addr {width: 20%;}  
.list .done {width: 20%;}
.list th, .list td {border: 1px solid #000; height: 40px; vertical-align: middle; text-align: center;}
.list tbody  tr:nth-child(odd) {background: beige;}          
.list tbody  tr:nth-child(even) {background: bisque;}

---

Test06.jsx

Test06.css import 해주기 !!

import '../css/Test06.css';

import React, { useState } from 'react';
import '../css/Test06.css';

const Test06 = () => {
    const [list, setList] = useState([
        { seq: 1, name: '홍길동', age: 20, addr: '서울', done: true},
        { seq: 2, name: '라이언', age: 25, addr: '제주', done: true},
        { seq: 3, name: '네오', age: 26, addr: '울산', done: false},
        { seq: 4, name: '프로도', age: 22, addr: '부산', done: true},
        { seq: 5, name: '코닌', age: 28, addr: '경기', done: false}
    ]);

    return (
        <div>
            <table className='list'> 
                <caption>신상명세서</caption>
                <colgroup>
                    <col className='seq'></col>
                    <col className='name'></col>
                    <col className='age'></col>
                    <col className='addr'></col>
                    <col className='done'></col>
                </colgroup>
                <thead>
                    <tr>
                        <th>번호</th>
                        <th>이름</th>
                        <th>나이</th>
                        <th>주소</th>
                        <th>동의여부</th>
                    </tr>
                </thead>
                <tbody>     
                    {   
                        list.map(item => 
                            <tr key={item.seq}>
                                <td>{item.seq}</td> 
                                <td>{item.name} </td>
                                <td>{item.age}</td>
                                <td>{item.addr}</td>
                                <td>{item.done ? '동의' : '비동의'}</td>
                            </tr>
                        )
                    }
                </tbody>
            </table>
        </div>
    );
};

export default Test06;