Learn/Today I Learn

Today I Learn #27

미래개발자 2022. 12. 6. 17:04
728x90

  개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지

 

React 입문 강의 듣는중!!

 

  오늘 새로 배운 내용

 

<React 프로젝트 생성/실행 터미널 명령어>

CRA 라는 Tool을 이용해서 필요한것들을 자동설치 해주는 터미널 명령어
(프로젝트 생성)
yarn create react-app 프로젝트 이름(대문자x, 특수기호x)
생성된 프로젝트 실행
yarn start

이후 localhost:3000으로 접속하면 됨

 

💡Button 클릭했을때 이름 변경 코드 

import React, { useState } from 'react';
// useState 라는 훅을 정의

function App() {
// 함수 Component 부분 function 키워드를 사용한 모습
  function onClickHandler() {
    setName('누렁이');
  }
// 클릭했을때 이름 변경되게 이벤트핸들러 사용
  const [name, setName] = useState('이태언');
  // 새 state를 만들어준다.

  return (
    <div>
      {name}
// 렌더링 될수 있도록 {name}을 넣기
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

 

 

💡input에 어떤 값 입력하면 

// input에서도 버튼과 더불어 사용자가 입력한 값을 State로 관리하는 패턴을 굉장히 많이 사용

import React, { useState } from 'react';

const App = () => {
  // 함수 Component에 화살표 함수를 사용한 모습
  const [value, setValue] = useState('');
  // 새 State 만듬
  const onChangeHandler = event => {
    const inputValue = event.target.value;
    // 사용자가 입력한 Input 값을 추출하기 위해서 event.target.value에 접근
    setValue(inputValue);
    // 추출한 값을 value의 State에 연결
  };
  // 핸들러를 Component에 연결함
  console.log(value);
  // value 값이 setValue 되는지 확인

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
      // input에서는 클릭하는 행동이 아니라 바뀌는 행동이므로 onChange에 함수를 연결 그리고 value를 연결
    </div>
  );
};

export default App;

// 정리하면 사용자가 Input의 어떤 값을 입력을 하면, 그 입력을 할 때마다(onChange될때마다) value라는 state의 setValuf를 해서 값을 넣어줌

 

<불변성>

불변성이란 메모리에 있는 값을 변경할 수 없는 것

원시데이터  - 불변성O / 수정을 했을 때 메모리에 저장된 값 자체를 바꾸는게 아니라 새로운 메모리 저장 공간에 새로운 값을 저장한다 그래서 참조하는 위치를 바꿈.(주소가 바뀜 = 리렌더링 일어남)

원시데이터가 아닌 객체, 배열, 함수 - 불변성X / 기존에 저장되어 있던 메모리 저장 공간에 값 자체를 바꿈(주소가 바뀌지 않음 = 리렌더링 일어나지 않는다)



React에서 메모리의 불변성을 지켜주는 것이 중요한 이유?

=> 화면을 리렌더링 할지 말지 결정할때 State의 변화를 확인하기 때문에 변화했는지 확인하는 방법이 Stats 변화 전과 후의 메모리 주소를 비교하는 것이기 때문.

=> 전개연산자를 이용해서 값을 복사 하고 그이후 추가 수정하는 방식으로 구현 ex) setDogs([...dogs, "치와와"]);

 

1. Component

컴포넌트는 리액트의 핵심 빌딩 블록 중 하나. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성. 컴포넌트는 UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체 UI 구축 작업을 훨씬 쉽게 만들어준다.

component 내부에서 JSX를 통해 선언하면 React가 이것을 화면에 그려준다.

React Component 개발 이전에는 동적으로 변화하는 UI를 표현하기 위하여 직접 DOM객체를 조작하는 명령형 프로그래밍 방식으로 구현했음. 

 

2. 렌더링

리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미

 

(렌더링이 일어나는 프로세스 설명)

  • UI - 음식
  • 컴포넌트 - 음식을 만드는 주방장
  • 리액트 - 웨이터
  1. 렌더링 일으키는 것은 (triggering)- UI를 주문하고 주방으로 전달하는 것
  2. 렌더링한다는 것은 (rendering)- 주방에서 컴포넌트가 UI를 만들고 준비하는 것
  3. 렌더링 결과는 실제 DOM에 커밋한다는 것은 (commit) - 리액트가 준비된 UI를 손님 테이블에 올려놓는 것

<렌더링 트리거>

  1. 첫 리액트 앱을 실행했을 때
  2. 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때.
    • 컴포넌트 내부 state가 변경되었을 때
    • 컴포넌트에 새로운 props가 들어올 때,
    • 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때

리액트 앱이 실행되고 첫 렌더링이 일어나면 리액트는 컴포넌트의 루트에서 시작하여 아래쪽으로 쭉 훑으며 컴포넌트가 반환하는 JSX 결과물을 DOM 요서에 반영

 

<리렌더링>

첫 렌더링은 자동으로 일어난다. 리액트 앱이 실행되면 리액트는 전체 컴포넌트를 렌더링하고 결과물을 DOM에 반영해 브라우저상에 보여준다. 첫 렌더링을 끝난 이후에 추가로 렌더링을 트리거 하려면 상태를 변경해주면 된다.

컴포넌트 상태에 변화가 생기면 리렌더링이 발생하는데 이때 여러 상태가 변경됐다면 리액트는 이를 큐 자료구조에 넣어 순서를 관리한다.

 

3. 브라우저 렌더링

 

브라우저의 렌더링과 리액트의 렌더링은 엄연히 다른 독립적인 프로세스이다. 렌더링이 완료되고 React가 DOM을 업데이트한 후 브라우저는 화면을 그린다. 이 프로세스를 "브라우저 렌더링"이라고 하지만 혼동을 피하기 위해 "페인팅"이라고도 한다.

 

 

보충)익명함수, 일반함수, 화살표함수(람다함수)

 

자바스크립트 익명 함수는 함수명 대신 변수명에 함수 코드를 저장하는 구현 방식입니다. 익명 함수의 소스 코드는 변수값이므로 끝에 세미콜론 ; 을 대입합니다. 익명 함수는 호출시 변수명을 함수명처럼 사용하면 됩니다.

 

익명함수

function() {
  함수로직
}

 

=> 익명함수는 호이스팅 불가능

 

 

일반적인 함수

function 함수명(){
  함수 로직
}

위의 일반함수와 익명 함수를 비교해 보면 함수 명의 유무의 차이인 것을 알 수 있다. 익명이라는 이름과 같이 메모리를 차지하지 않는다. 따라서 람다로 코딩을 하면, 메모리가 사용되지 않으므로 재사용하지 않고 일회용으로 많이 사용된다. 이러한 이유 때문에 익명 함수는 아래와 같이 변수에 담아서 많이 사용한다.

 

 

익명함수(리터럴 방식)

const 변수 = function() {
  함수로직
}

 

화살표함수(람다함수)

 

기본형

// 일반함수
function hanpy1(){
  console.log("hi");
}

// 화살표함수
const hanpy3 = () => {
  console.log("hi");
}

// 화살표함수(짧게가능)
const hanpy3 = () => console.log("hi");

 

화살표 함수는 함수명이 없어서 익명함수라고 부르기도 한다.(익명 함수로만 사용 가능)

메모리 관리가 효율적이고 짧게 사용가

 

 

💡+버튼을 누르면 1씩증가, -버튼을 누르면 -1씩 감소

import React, { useState } from 'react';

function App() {
  const [number, setNumber] = useState(0);

  return (
    <div>
      {number}
      <button
        onClick={() => {
          setNumber(number + 1);
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          setNumber(number - 1);
        }}
      >
        -
      </button>
    </div>
  );
}

export default App;

 

 

 

 

 

  회고

 

react 입문강의 다들었는데 과제를 아직 못했다 ㅠ 시간이 너무 부족함... 다들 9시 이후에도 열심히 하는데 9시 되면 머리가 멈추는것 같다ㅋㅋ 최대한 9to 9 밀도있게 해봐야겠다!

 

  To-Do List

 

- to do list 만들기

- 배열관련 4개 메서드 예제 만들고 영상찍기 

 

728x90
저작자표시 (새창열림)