프로그래머 도전기 92일차

프로그래머가 될거야!

by Choyee 2023. 12. 31. 20:49

오늘은

React에 대한 공부를 시작하게 되었습니다

js에 대한 공부도 한번씩 더 보고있고

node.js에 대해서 이해를 하려고 노력하면서

react에 들어왔는데 생각보다 생소한 모양이 많이 보이는 것 같아서

쉽지 않을 것 같습니다

몸 상태는 점점 좋아지고 있어서 다행입니다

아직 기침을 많이 하긴 하지만

컨디션이 점점 돌아오고 있습니다

React 공부

<React 입문>

* React가 필요한 이유
- 중복 코드 작성으로 인하여 수많은 페이지에 같은 수정 사항이 생김
  => Shotgun Surgery(산탄총 수술)상황 발생
=> 컴포넌트화 방식 사용
    = 별도의 파일이나 모듈로 작성해 놓은 후(컴포넌트라고 부른다)
       각가 필요한 페이지마다 컴포넌트의 이름으로 불러서 사용한다
=> 이 때 React가 필요한 것

* React = Component 기반의 UI 라이브러리이다

* 명령형 프로그래밍 = 절차를 하나하나 다 나열 해야함
                          => ex) 1. 결과를 표시할 요소를 가져온다(document.queryselector(""))
                                   2. 현재 결과값을 10진수 기준, 숫자형으로 변환해서 가져와
                                       current라는 상수에 저장한다
                                   3. current상수에 저장된 값을 결과를 표시할 요소의 값에
                                      plus 라면 +1을 해서 넣고
                                      minus라면 -1을 해서 넣는다
                          => 대표적 기술 = jQuery

* 선언형 프로그래밍 = 그냥 목적을 바로 말함
                          => ex) 1. plus를 누르면 result값에 +1을 하고
                                      minus를 눌르면 반대로 한다
                          => 대표적 기술 = React

* DOM = Document Object Model
          = 브라우저가 실제로 사용하는 객체
          = HTML 코드를 트리 형태로 변환시켜놓은 객체
          = Document -> <html> -> <head> -> <title> -> "My Title"
                                         -> <body> -> <h2> -> "Hello"

* Virtual DOM
  가상의 DOM을 사용하여 javascript를 통하여 요소가 추가되는 변화가 발생할 때
  실시간으로 실제 화면에 나타나는 DOM을 update 시키는 것이 아니라
  가상의 DOM을 rendering을 거치지 않고 미리 update를 시켜본 다음에
  그 부분들을 모아서 한번에 실제 real DOM에 update를 시켜서 과도한 연산을 방지한다


React.js = Node 기반의 Javascript UI 라이브러리
Webpack = 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리
Babel = JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리

React -> Webpack
        -> Babel
                          => React App 세팅

=> Boiler Plate = 이미 세팅 완료된 패키지
                    = 빵 틀의 역할을 하는 패키지를 의미

Create React App 사용
- 기본적으로 npm i 명령어를 써서 설치를 하여 사용한다
- 일회성으로 사용할 경우 : npx명령어 사용 (npm을 편하게 사용하기 위해 존재하는 도구)
                                  = 설치되어있지 않은 객체를 한번만 사용하고 싶을 때

* JSX 문법
= JavaScript 표현식 Extension
= JavaScript와 Html 코드와 합쳐서 사용할 수 있는 문법

<<JSX>>
= JavaScript의 확장 문법
   JavaScript와 html을 혼합해서 사용할 수 있는 React 표현식

=> Reaact의 컴포넌트를 만들때 쉽게 만들 수 있도록 도와준다

<jsx 문법>
* 닫힘 규칙
= 여는 태그가 있으면 닫는 태그가 반드시 있어야 한다
= html과 다른 점은 image태그, br태그 모두 닫아주어야 한다는 점이다
=> 태그를 열자마자 닫는 방법으로 해결
     ex) <image />, <br /> = self closing tag

* 최상위 태그 규칙
=> 최상위 태그 = 컴퍼넌트의 구성중에 가장 바깥에 위치하는 태그
                       다른 모든 태그들을 감싸고 있는 제일 바깥 태그
= jsx로 컴퍼넌트를 만들어서 return하려면 반드시 하나의 최상위 태그로
  다른 태그들을 묶어주어야 한다
=> React를 import해서 Fragment를 사용하여 대체할 수 있다
     (= 빈 태그로도 대체할 수 있다)

* class(js의 예약어) 대신 className을 쓴다

* import 키워드와 경로를 사용하여 css 파일 등을 적용시킬 수 있다

* inline styling 방식
= css 파일을 사용하지 않고 객체를 생성해서 스타일링을 하는 방식

<jsx에서의 js값 사용하기>
* jsx 에서는 js의 변수나 값을 포함할 수 있다
  식도 표시가 가능하다

* 숫자나 문자가 아닌 것을 { }안에포함하게 되면 rendering되지 않는다

* 조건부 rendering
  = 삼항연산자등을 활용하여 조건에 따른 값을 표시할 수 있다

const OddEvenResult = ({count}) => {
    return <>{count % 2 === 0 ? "짝수" : "홀수"}</>;
}

export default OddEvenResult;

<<state 상태>>
= 동적으로 변화하는 어떠한 값
그 값에 따라 다른 행동을 수행하도록 하는 것

* component가 가진 state가 바뀔때 마다 re-rendering 된다
* 상태가 변할 때 마다 re-rendering을 한다 = 새롭게 화면을 표시한다
= 함수가 다시 호출된다

import './App.css';
import Counter from './Counter';

import MyHeader from './MyHeader';

function App() {

  return (
    <div>
      <MyHeader />
      <Counter />
    </div>
  );
}

export default App;

import React,{useState} from 'react';

const Counter = () => {

    // 0에서 출발 = useState(0)
    // 1씩 증가하고
    // 1씩 감소하는
    // count 상태

    const [count, setCount] = useState(0);

    const onIncrease = () => {
        setCount(count + 1);
    };
    const onDecrease = () => {
        setCount(count - 1);
    };

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    );
};

export default Counter;

<<Props>>
= component에 data를 전달하는 효율적이고 강력한 방법
= component를 다른 component에 prop으로 전달할 수 있다

* prop = 부모 컴포넌트에서 자식 컴포넌트에게 값에 이름을 붙여 전달하는 방법
  porps = 자식에게 여러개의 값을 전달

* defaultProps
= 부모컴퍼넌트에서 값을 내려준적이 없음에도 불구하고
   기본값을 사용해서 에러를 방지할 수 있다

* 정적인 데이터 뿐만 아니라
  동적인 데이터도 전달할 수 있다

* re-render가 될 때
1. 본인이 가진 state가 변경될 때
2. 부모요소의 state가 변경될 때 자식요소도 rendering된다 = 부모가 바뀔 때 자식도 re-render가 된다
3. 자식요소에게 내려가는 props가 변경될 때

2023. 12. 31 (일)

저작자표시 비영리 변경금지

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 94일차 (2)	2024.01.03
프로그래머 도전기 93일차 (0)	2024.01.01
프로그래머 도전기 91일차 (2)	2023.12.28
프로그래머 도전기 90일차 (4)	2023.12.21
프로그래머 도전기 89일차 (2)	2023.12.20