[React] Day_28 데일리 정리

 

강의... 하얗게 불태웠다..

 

타임어택 강의듣기 결국 해냄... (장하다 림졍!)

그리고 남은건... 개인프로젝-투랑 강의 정리...

프로젝트 마감기한 금요일까지던데.. 할 수 있겠죠..?

(미래의 림졍 : 응 밤샐게.)

일단 오늘은 강의정리 호다닥 끝내는거로~.~

가 ㅅl ㄷr.

ㅂ

 

 

React (리액트) 강의 정리 

2주차(이어서) : 짱 많은 새로운 개념친구들 그리고.. 실.. 스읍.. 실습!!!!

 

강의듣는_림졍의_디폴트_표정값.css

 

 

컴포넌트

 

UI → 재사용 가능한 여러 조각, 개별적으로 나누는것

ㅈ... 재사용이요? [system] 림졍(환경공학 전공자) 은(는) PTSD가 오기 시작했다!

(= jsx를 return하는 함수)

 

- 컴포넌트의 종류(2) → 함수형 컴포넌트(권장) / 클래스형 컴포넌트(잘 사용안됨..)

- 컴포넌트 특징

→ 반드시 첫 글자는 대문자! (폴더 : 소문자 시작 카멜케이스 / 컴포넌트 파일 : 대문자 시작 카멜 케이스)

cf. 카멜케이스 : 각 단어의 첫 글자를 대문자로, but 첫 단어는 소문자로 (newCase)

추가적으로 스네이크 케이스는 모든 단어를 소문자로, 단어 사이에 '_'써줌.

 

JSX

 

JS 모든 기능 + React Element 생성 포함된 Javascript 확장 문법 ( = HTML을 품은 JS )

식에는 하나의 태그만 존재!

import React from "react";

const App = () => {
    const number = 1000;
    const arr = [1, 2, 3, 4, 5];
    // 위엔 JS,
    // 아래부턴 html과 유사한 jsx
    //여기서 질문, <div> ~~</div> 요소는 DOM요소? -> 정확하게는 React 요소임 (가상 DOM이랍니다.)
    return <div id="abc" className="abc">
    <p style={{ color : "orange", fontSize: "20px"}}>
    첫 번째 줄</p>
    </div>;
};

export default App;

 

- 특징

중괄호 ' {} ' → JS 요소(함수 or 변수) 넣을 때 사용

html과의 차이점 : class → className 통해 선언, css → 카멜케이스 사용하여 표기 (객체 방식으로 부름)

 

+) 브라우저는 jsx파일을 직접 해석 X

∴ babel 이용, jsx → js 변환

 

• 변환 전

const Element = <div className="greeting">hello</div>

• 변환 후

const Element = React.createElement(
  'div',
  {className:'greeting}, 
  'hello'
   );

 

 

props

 

컴포넌트(부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터) 간의 정보 교류법

 

- 특징

반드시 위에서 아래로, 부모 to 자식 ( ?? : 부모는 자식을 이길 수 없ㅇㅓ! )
읽기 전용으로 취급하며 내부에서 직접변경 X. ( 단방향 데이터 흐름 원칙에 따름 )
객체 리터럴(object literal) 형태, 키-값 쌍 구성.

// 부모 컴포넌트
function Parent() {
return <Child age = {26} gender="female" />;
}

 

• 부모 컴포넌트 to 자식 컴포넌트,  age & gender 속성 전달 예시

// {age}, {gender} 대신  {props.name}, {props.age}도 가능
function ChildComponent(props) {
  return (
    <div>
      <p>나이: {age}</p>
      <p>성별: {gender}</p>
    </div>
  );
}

// 추가) 구조분해할당을 사용하여 가져오기
function Child({ age, gender }) {
  return (
    <div>
      <p>나이: {age}</p>
      <p>성별: {gender}</p>
    </div>
  );
}

// 출력은 대충 이렇게 나온다..
{
  age: 25,
  gender: female
}

 

props Children (추가)

 

자식 컴포넌트로 정보를 전달하는 또다른 방법 (props의 일부)
ParentComponent to <ChildComponent>로 전달된 <p> 태그, {props.children}로 전달되면,

<ChildComponent> 내 {props.children}으로 접근하여 내용 출력가능.

// 부모 컴포넌트 to 자식 컴포넌트 태그 사이에 넣은 내용, props.children으로 자동 전달

function ParentComponent() {
return (
  <ChildComponent>
    <p>이 내용이 props.children으로 전달됩니다.</p>
  </ChildComponent>
);
}

function ChildComponent(props) {
return (
  <div>
    <h2>Child Component</h2>
    {props.children} {/* 자식 콘텐츠 렌더링 */}
  </div>
);
}

 

props.children을 활용시 장점 : 컴포넌트 내용(콘텐츠) 동적으로 구성 및 더 유연하고 재사용성 높은 컴포넌트 제작가능.

+) Layout 컴포넌트를 만들 때도 유용하게 사용

 

 

state

 

컴포넌트 내부에서 바뀔 수 있는 값, UI에 즉각적인 데이터 반영을 위해 사용.

(리액트에선 값 변경 시, 그냥 바로 수정이 안되어서... 사용되는 친구)
State 생성 시, useState()를 사용하면 된다.

 

- useState 기본형태

const [ value, setValue ] = useState(initial state); 

 

- state 사용 예시 : 이럴때 써먹지 도란스뽀머.

import React, { useState } from "react";

const App = () => {
    const [name, setName] = useState("오라이온 팩스");
    return (
        <>
            <h1>State 실습하기</h1>
            <button
                onClick={() => {
                    setName("옵티머스 뿌라임");
                }}
            >
                받아들일테냐, 매트릭스를!
            </button>
            <p>{name}</p>
        </>
    );
};

export default App;

 

useState 안에 들어가 있는 기본값은 매트릭스 받기 전의 옵대장(원래 본명은 오라이온 팩스)이다.

버튼을 누르면 매트릭스를 얻어 뿌라임(프라임입니다.)으로 바꾸게 하고 싶을땐

setName이라는 함수를 실행시켜 그 안에 바꾸고 싶은 값을 넣으면 된다.

(예시는 나중에 이미지랑 같이 만들어서 가져와보도록 하죠.)

우리 귀여운 옵대장좀 보세요 ㅎㅎ

 

- 불변성

말 그대로 값이 변하지 않는것.

 

- 불변성을 유지하는 방법(Immutable way)의 중요성

불변성이 깨졌다 : 여러 컴포넌트나 함수가 동일한 데이터에 의존하는 환경에서 기존 데이터를 직접 수정하면 발생

If 변경 가능한 방법(Mutable way)을 활용하여 코드 작성 시, 프로그램의 다른 부분이 해당 데이터 구조를 참고하고 있을 경우 ↑

→ 예상치 못한 변경으로 인한 버그 발생의 위험성 존재 + 또한 기존 데이터 변경 지점이 여러곳일수록 버그는 추적 어려움

∴ 기존 데이터를 직접 변경 → 새로운 데이터를 만들어서 반환하여 불변성을 유지

(기존 데이터는 keep, 새로운 데이터만 변경되므로 다른 코드에 영향 X)

 

- 불변성이 가지는 의의 (in React)

리액트에서는 화면을 리렌더링할지 말지 결정할 때 state의 변화를 확인함 (얕은 비교). → 상태가 변경되면, 리렌더링.

state 변경 여부 확인법 : state 변화 전후의 주소값을 비교

원시 데이터의 경우 : 값 변경 시, 새로운 메모리 주소가 할당. → React 쉽게 감지 가능

복합 데이터(객체, 배열 등)의 값 직접 수정 시 : 메모리 주소 변동X → React, state 변화를 인지 못할수도..?

리액트에서는 불변성을 유지하는 방법(Immutable way)을 사용하자.

state 변경 시, 항상 새로운 객체나 배열을 생성 + setState를 사용 → 상태 꾸준히 업데이트 해주기

 

 cf. 얕은 비교(shallow comparison): state 변화 감지 시, React가 사용하는 비교 방식. 객체 첫 번째 레벨의 프로퍼티만 비교

 

 

 

 

 

마무리 - 결국 마무리 못한 강의정리.. 그리고 작전 변경

 

그렇게 쳐다보지 마세요 메가트론 -.-..

 

할일은 다했지만 강의는.. 다 적지못했다!

음.. 남아있는게 그렇게 많지는(?) 않아서... 

원래 계획했던 일정들을 싹- 변경하기로 했습니다 하하

그래서 어떻게 될 예정이냐면요..

 

[ 림졍의 쌈-뽕한 계획표★ ]

10/30 (수) : 개인 프로젝트 중간점검 (컴뽀넌트랑 싸울예정)

10/31 (목) : 작성못한 강의정리

11/1 (금) : 개인프로젝트 후기

+) 시간되면 코드블럭 이쁘게 만들어보기(?)

 

이렇게 될거 같슴둥.. 아 몰라 일단 잘래요

슬립 웰 열어분. (잘자라는 뜻입니다 대충.)

 

 

 

오늘 KPT 회고

• Keep :  개인 프로젝트랑 할거는 다 했다!
• Problem : 왜 리마인드만 하면 고장이 날까..? 나란 자식..
• Try : 이번엔 계획대로 안지키면 너는 금요일에 짤로 뒤덮인 TIL 작성하자. 나에게 주는 벌임 (응?_

 

 

끄

ㅌ