포스코 X 코딩온 7기 9주차 ch.1 React( jsx, props, state, useState)(feat. 그리고 요즈음...)

벌써 9주차다!
뭔가 시간이 빠르게 가는듯 더디고 
2달전이 한 1년 전 같으면서도 
엊그제 같기도 하고
(뭐래..)
 
대충 정신을 놓고 살았다는 뜻 같다.
 
그동안 참 많은 일이 있었지~
 
지나고 보니 참으로도 소중한 시간들...
어쩌고..
 
서론은 집어치우고,
오늘부터 React진도를 나갔다!
 
그럼 바로 배운 내용 복습을 하도록 하겠다!
 

---

React 란?

- 화면을 만들기 위한 js라이브러리
 
- 사용자와 상호 작용이 가능한 동적 UI제작 가능
 
특징!
 
1. Data Flow
 
- 양방향이 아닌, 단방향 데이터 흐름이다
 
2. Component 기반 구조
 
- 독립적인 단위의 소프트웨어 모듈로 소프트웨어를
독립적인 하나의 부품으로 만드는 방법이다.
 
- React는 UI를 여러 Component를 쪼개서 만든다.
 
- 한 페이지 내에서 여러 부분을 Component로 만들고,
이를 조립해 화면을 구성한다.
 
장점>
 
- 전체 코드를 파악하기 쉽다
- 재사용성이 높다
- 간편함
-코드의 유지보수, 관리가 용이
 
3. Virtual Dom
 
DOM: DocumentObject Model
문서 객체 모델
 

 
4. Props and State
 
- props : 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터
- 자식에서는 props변경 불가능,
props를 전달한 최상위에서만 변경 가능
 
- statue : 컴포넌트 내부에서 선언되고 
내부에서 값을 변경
- 클래스형 컴포넌트에서만 사용 가능,
각각의 statue는 독립적이다.
 
5. JSX
 
- react에서 jsx사용이 필수는 아니지만 많이 사용됨
 
- jsx= javascript + xml
 

---

React 파일들에 대해

 

npx create-react-app {앱이름}

react를 깔아주면 자동으로 생성되는 파일들이 있다.
 

 

1. index.js
2. App.js
3. index.html



1. index.js
- src폴더에 포함되어 있다.
- 메인 프로그램
- 여기에서 html 템플릿 및 js의 컴포넌트를 조합하여 렌더링하고 실제 표시

2. App.js
- src폴더에 있다.
- 컴포넌트를 정의하는 프로그램
- 실제로 화면에 표시되는 내용 등은 여기에서 정의

3. index.html
- public폴더에 있다.
- 메인 프로그램인 index.js에 대응되는 것으로,
html 템플릿 파일 이다.
- 이 파일이 직접 표시되는 것은 아니고,
index.js에 의해 일어 와서 렌더링 된 결과가 표시된다.

---

index.js>

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import Clock from "./Clock";

const root = ReactDOM.createRoot(document.getElementById("root"));

setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000);

- 최초에 react, react-dom라는 모듈을 로드하고 있고,
이것들이 react의 본체이다!
 
const root= ~
- 이런 식으로 react에서 루트를 생성한다는 것은
react애플리케이션을 렌더링할 수 있는 Dom에서 '루트'노드를 생성하는 과정을 의미
 
- document.getElementById("root")부분은 
루트가 생성되어야 하는 Dom요소를 지정하는데 사용
 
App.js>

function Clock() {
  return (
    <>
      <div>
        <h1>현재 시간은 : {new Date().toLocaleTimeString()} </h1>
      </div>
    </>
  );
}

export default Clock;

이런식으로 component를 만들 수 있다!
 

---

JSX 문법

 
1. html에 class넣을 땐 className을 사용
 
2. 변수 html에 꽂아 넣을 때는 {중괄호}
 
 

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그임</div>
        <div>{ post }</div>
      </div>
    </div>
  )
}

 요런 식으로!
 
href, id, className, src등 여러가지 html속성들에도 가능하다
 
변수에 있던 걸 html에 꽂아넣는 작업을 
'데이터 바인딩' 이라고 한다.
 
3. html에style속성 넣고 싶으면
 

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>

이렇게 
style = { } 안에 { } 자료형으로 집어넣는다.
 
 

---

Component

- MVC View를 독립적으로 구성해 재사용할 수 있고,
새로운 컴포넌트도 만들 수 있다.
 
- 데이터(Props)를 입력 받아 View상태(State)에 따라 
Dom Node를 호출한다.
 
- ui를 재사용 가능한 개별적인 여러 조각으로 나누고,
각 조각을 개별적으로 나누어 코딩이 가능하다.
 
1. 클래스형 컴포넌트

 
 
2. 함수형 컴포넌트

 
 
정의 방법과 상태 및 수명 주기 메서드를 처리하는 방법에 차이가 있다.
 

props란?

 
- properties를 줄인 표현으로 
컴포넌트 속성을 설정할 때 사용하는 요소
 
- 상위 컴포넌트에서 하위 컴포넌트로 전달(단방향 데이터 흐름)
 

 
함수형 컴포넌트 props
사용법!

 
- defaultProps
: 부모 컴포넌트에서 props가 전달되지 않았을 때
기본 값으로 보여줄 props를 설정
 

Best.defaultProps = {
  title: "나의 하루는 4시 40분에 시작된다",
  author: "김유진",
};

이런 형식!
 
- props.children
 

 
- propTypes
 
: 컴포넌트의 필수props를 지정하거나
props의 타입을 지정할 때 사용 
 
:정해진 타입이 아닌 다른 타입으로 정보가 전달 될 시,
제대로 동작은 하지만 console에 오류가 나온다.
 

---

state란?

- 유동적인 데이터를 다루기 위한 개체
 
- 계속해서 변하는 특정 상태
 
- 상태에 따라 다른 동작을 한다.
 
- 사용 이유? 
: state가 변경될 시 자동으로 재랜더링 되기 때문
: 이 점이 변수와 다른점
 
state vs. props
- props는 부모 컴포넌트에서 자식 컴포넌트에 
데이터 전달시 사용되는 것
 
- state는 특정 컴포넌트가 갖는 상태(값)
 

 

함수형 컴포넌트의 useState()

 

 
- useState함수의 인자에는 상태의 초기 값
(값의 형태는 숫자일수도, 문자일수도,
배열일 수도 있다.)
 
- useState함수는 배열을 반환한다.
 

const [ message, setMessage ] = useState(" ");

 
message는 현재 상태를 말한다.
setMessage는 상태를 바꿔주는 setter함수이다.
("")는 상태의 초기값을 말한다.
 
 

---

 
실습1. 

function Change() {
  const [message, setMessage] = useState("검정색");
  const [color, setColor] = useState({ color: "black" });

  const Red = () => {
    {
      setMessage("빨간색");
      setColor({ color: "red" });
    }
  };
  const Blue = () => {
    {
      setMessage("파란색");
      setColor({ color: "blue" });
    }
  };

  return (
    <div>
      <h1 style={color}>{message} 글씨</h1>
      <button onClick={Red}>빨간색</button>
      <button onClick={Blue}>파란색</button>
    </div>
  );
}

export default Change;

 
이 코드를 작성할 땐 
color를 어떻게 줘야할지 몰라 살짝 헤매었다
 
 
실습 2.
 

class UpDown extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }

  up = () => {
    this.setState({ number: this.state.number + 2 });
  };
  down = () => {
    this.setState({ number: this.state.number - 1 });
  };

  render() {
    const { number } = this.state;

    return (
      <div>
        <h1>{number}</h1>
        <button onClick={this.up}>+2</button>
        <button onClick={this.down}>-1</button>
      </div>
    );
  }
}

 
실습 3.

const FunctionUpDown = () => {
  const [number, setNumber] = useState(0);

  const increase = () => {
    setNumber(number + 1);
  };

  const decrease = () => {
    setNumber(number - 2);
  };

  return (
    <div>
      <p>Number: {number}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
};

 

---

 

어제오늘 배운 react내용을 정리해 보았다..

 

그리고 요즈음...

 

그리고 벌써 6월도 끝나간다는 사실에

소스라치게 놀람

(사실 소스라치진 않았고 놀라긴 함)

 

새해가 엊그제 같은데..

(이건 레알)

 

벌써 상반기가 지나고 

하반기가 남았다

 

23살의 상반기 인생이 정말 

순.식.간에

지나간 것 같다

 

23살 하면 뭔가 예쁜 나이 23살

막 행복만 하고 그럴 줄 알았는데

현실은 ..

 

음....

 

#아프니까_청춘이다

 

매일 밤마다 기숙사 앞에 곱등이가 나와..

삽으로 5마리씩 죽이면서 들어간다..

얼마전 화장실에선 바퀴벌레가 나왔다..

 

 

왜 너희들까지 나를 힘들게 하니..

 

 

그리고 얼마전 강의실에 무슨 기운이 돌았나

절반 이상 감기에 걸려 단체 조퇴를 했다 

오랜만에 진짜 겁나 아팠다

아무도 없는 타지에서 시름시름 앓았더니 정말 서러웠다 ㅋ

 

 

#진짜_아프니까_청춘이다

 

니가 선택한 길이다

#버텨라

 

 

그리구

 

 

다은언니 서울 온 기념으로 간 카미야!

또간집에 나와서 웨이팅이 엄청 길었는데

기다린 보람이 있는 맛이였다!

 

 그리고 청주 집앞에 탕후루 가게 생겨서 첨 먹어봤는데

음... 

다신 안사먹을 듯 ㅋ

이빨 썩는 맛

너무 달아서 입이 막 쪼그라드는 맛
 
 

그럼 이만..