hyeoneee's blog

https://ko.react.dev/learn/thinking-in-react

정리하자면,,,

State 는 어떤걸로?

• 시간이 지나면서 변할 수 있음
• props로 받는거 아님
• 계산 가능 아님 ( vue에서 computed 에 들어가는건 아님.. 이렇게 이해)

State 어디에 위치?

• 공통부모
• 공통부모가 없다면 그 상위
• 아니면 새로 상위 컴포넌트 만들어서

State가 어디에 위치해야 하는지 결정

대개, 공통 부모에 State를 그냥 두면 됩니다.

혹은, 공통 부모 상위 컴포넌트에 둬도 됩니다.

State를 소유할 적절한 컴포넌트를 찾지 못했다면, State를 소유하는 컴포넌트를 하나 만들어서 상위 계층에 추가하세요.

Props vs State

React는 Props와 State라는 두 개의 데이터 “모델”이 존재합니다. 둘의 성격은 매우 다릅니다.

• Props는 함수를 통해 전달되는 인자 같은 성격을 가집니다. Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 넘겨서 외관을 커스터마이징하게 해줍니다. 예를 들어, Form은 color라는 Prop을 Button으로 보내서 Button을 내가 원하는 형태로 커스터마이징할 수 있습니다.
• State는 컴포넌트의 메모리 같은 성격을 가집니다. State는 컴포넌트가 몇몇 정보를 계속 따라갈 수 있게 해주고 변화하면서 상호작용Interaction을 만들어 냅니다. 예를 들어, Button은 isHovered라는 State를 따라갈 것입니다.
• Props와 State는 다르지만, 함께 동작합니다. State는 보통 부모 컴포넌트에 저장합니다. (그래서 부모 컴포넌트는 그 State를 변경할 수 있습니다.) 그리고 부모 컴포넌트는 State를 자식 컴포넌트에 Props로서 전달합니다. 처음 봤을 때 둘의 차이를 잘 알기 어려워도 괜찮습니다. 약간 연습이 필요할 거예요!

리렌더링?

• React는 다른부분만 리렌더링 → 최적화
• 모든 이벤트 핸들러가 실행되고 set 함수를 호출 한 후 화면 업데이트 → 단일 이벤트 중 여러번 리렌더링 방지 

라이프사이클

• mount(생성): useEffect(() => { ... }, [])
• update(업데이트): useEffect(() => { ... }, [의존값])
• unmount(소멸): useEffect 반환 함수(return () => { ... })

import { useEffect } from "react"; 
 
function MyComponent() { 
  useEffect(() => { 
    // (생성/마운트 - created, mounted) 
    // 여기에 API 호출 등 
    console.log('컴포넌트가 마운트됨'); 
 
    return () => {  
      // (언마운트 - destroyed) 
     // 이벤트 제거, 타이머 해제 등  
      console.log('컴포넌트가 소멸됨'); 
    }; 
  }, []); // 의존성 배열 - 빈 배열이면 최초/언마운트만 실행됨 
     
  return <div>Hello</div>; 
}

JSX

https://ko.react.dev/learn/writing-markup-with-jsx

1.하나의 루트 엘리먼트로 반환하기

JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다.

하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다. 

따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

2. 모든 태그는 닫아주기 (당연한거 아닌가..?)

3. 거의 대부분 캐멀 케이스로 작성

양방향 바인딩

vue에서 v-model 인것

• 값 상태 관리와 변경 이벤트가 분리되어 있음

import { useState } from "react"; 
 
function MyInput() { 
  const [text, setText] = useState(''); 
  return ( 
    <input  
      value={text} 
      onChange={e => setText(e.target.value)} 
    /> 
  ); 
}

리액티브 vs. 선언적, 불변성 관리

Vue

• Vue는 this.message = "hi"처럼 변경하면 자동으로 UI가 갱신
• 배열/객체 변화도 내부적으로 Proxy로 추적

React

• "불변성 유지"를 아주 중요하게 여김!
• 상태 변경 시 새로운 객체 생성 필요.
  (기존 객체나 배열 수정 X, 꼭 새로운 레퍼런스 할당 O)
• 주요 이유: 레퍼런스가 달라져야 리렌더링이 발생함
• 객체도 마찬가지로 spread (...) 문법 등으로 새 객체를 만들어야 함.
  
  즉, 상태(객체/배열) 변경 시 무조건 "복제 → 새롭게 할당" 방식이 기본!

// 잘못된 예시 (직접 수정) 
const [arr, setArr] = useState([1,2,3]); 
arr.push(4);          // X (불변성 위배) 
setArr(arr); 
   
// 올바른 예시 (새 배열 할당) 
setArr(prev => [...prev, 4]);   // O

컴포넌트 통신

vue 에서는 

• 부모 → 자식 props로 전달
• 자식 → 부모 $emit

React에서는

• 부모 → 자식 props로 전달
• 자식 → 부모 자식이 콜백 실행 

• React는 emit과 같은 전용 시스템이 없습니다.
• 자식이 부모에게 데이터를 전달하려면, "부모가 함수(콜백)를 props로 주고, 자식이 그 함수를 호출"하는 방식입니다.
• 컴포넌트 간 state 이동은 props를 통해, cross-parent 간 이동은 상태 끌어올리기(lifting state) 방법을 자주 사용합니다.

import React, { useState } from 'react'; 
   
function Child({ msg, onMsg }) { 
  return ( 
    <div> 
      <div>자식에서 받은 값: {msg}</div> 
      <button onClick={() => onMsg('자식에서 클릭됨!')}> 
        부모에 이벤트 알리기 
      </button> 
    </div> 
  ); 
} 
   
function Parent() { 
  const [parentMsg] = useState('부모의 메시지!'); 
   
  const handleChildMsg = (childMsg) => { 
    alert('자식에서 받은 메시지: ' + childMsg); 
  }; 
   
  return ( 
    <div> 
      <Child msg={parentMsg} onMsg={handleChildMsg} /> 
    </div> 
  ); 
} 
   
export default Parent;

상태관리

Vue

• Vuex (store, module, action/mutation 등)

React

• 복잡도/팀 규모에 따라 매우 다양함
• Context API: 간단한 전역상태 마치 Vue의 provide/inject 느낌
• 외부 라이브러리:
  • Redux: 전통적, 정말 많은 기능(개발툴, 미들웨어)
  • Recoil / Zustand: 간단한 글로벌 state
  • MobX: 리액티브한 구조, 데코레이터 기반
    
    상태 관리 패턴
• 기본적으로 "props-drilling"(여러 단계 props 전달)이 발생하면 Context나 외부 상태관리 사용 고려
• 작은 프로젝트 → useState/Context 조합으로도 충분
• 프로젝트가 커지면 Redux, Recoil, Zustand 등 사용 → 우리는 redux 사용 

1. Context API

1) 개념

• React 공식 내장 기능(외부 라이브러리 불필요)
• 컴포넌트 트리 전체에서 전역적으로 데이터를 쉽게 공유
• 예: "로그인 정보, 테마, 언어" 등 여러 곳에서 반복적으로 쓰이는 값 관리에 적합

2) 원리

• createContext로 context를 생성
• Context.Provider로 값(value)을 하위 트리에 "공급(Provide)"
• 하위 컴포넌트 어디서든 useContext(Context)로 참조 가능

import { createContext, useContext, useState } from 'react'; 
   
const NameContext = createContext(); 
   
function App() { 
  const [name, setName] = useState('철수'); 
   
  return ( 
    <NameContext.Provider value={{ name, setName }}> 
      <Child /> 
    </NameContext.Provider> 
  ); 
} 
   
function Child() { 
  const { name, setName } = useContext(NameContext); 
  // 이렇게 중첩된 컴포넌트 어디서나 쉽게 접근 
  return <input value={name} onChange={e => setName(e.target.value)} />; 
}

장점

• 별도 라이브러리 없이 전역 상태 가능
• 코드량 적음, 간단한 앱에 적합

단점

• 상태 변경 시 Provider 하위 모든 컴포넌트가 "무조건" 리렌더링됨 (성능 문제)
• 복잡한 전역 상태나 로딩/비동기 관리엔 한계

2. Redux

1) 개념

• React 중심의 가장 오래되고 유명한 상태 관리 라이브러리
• 아주 큰 앱(대규모 상태/데이터 흐름, 복잡한 데이터 구조, 액션 추적, 미들웨어 필요 등)에 특화
• 상태의 일관성, 예측가능성, 시간여행(debugging) 보장

2) 원리

•  메인 구성요소
  • 상태(state)를 담고있는 중앙 저장소(하나만 존재)
  2. action (액션)
  • "이런 일이 일어났다!"라는 신호(객체/함수)
  • { type: 'INCREMENT', payload: 3 } 처럼 객체
  3. reducer (리듀서)
  • 스토어의 상태를 "어떻게 바꿀지" 결정하는 함수
  • 이전 상태+액션 → 새 상태 반환 (상태를 직접 바꾸지 않고, "복사본 새로 만듦" ★불변성)
• 1. store (스토어)
•  Redux 상태 변화 흐름

1. 액션 발행(dispatch action)
   • 사용자가 버튼 클릭 → "INCREMENT"라는 액션을 발생시키도록 코드가 dispatch
2. 리듀서(reducer)가 호출됨
   • 현재 상태와 액션을 인자로 받아 새로운 상태를 '리턴'
3. 스토어(store)가 새 상태로 변경
   • 변경된 상태를 스토어가 갖게됨
4. React 컴포넌트는 구독해 두었다가, 상태가 바뀌면 자동으로 리렌더링됨

장점

• 아주 안정적, 예측가능/디버깅 최상, 미들웨어 확장 쉬움
  (로깅, API관리, 비동기 등 커스텀 작업풍부)
• 레거시 기업/대형서비스에서 매우 많이 사용
  
  단점
• 코드량 많음/복잡(boilerplate), 작은 앱에 불필요하게 무거움
• 리듀서/액션/스토어/미들웨어 등 개념이 많아서 진입장벽 있음

React를 공부하다보니깐

compoent의 종류가 두가지가 있었다

Functional compoent와 class component

두개의 차이점이 궁금해졌다

그래서 알아보고자한다 

사실 create-react-app 으로 프로젝트 생성할때 이전에는 class component로

생성 되었던거 같은데 이번엔 functional component로 생성되길래 

오잉또잉??ㅇㅅㅇ???

해서 찾아보게 된것이다,,,

후후 이글은 사실

https://medium.com/@Zwenza/functional-vs-class-components-in-react-231e3fbd7108

다음글을 거의 해석한것과 다름없다.

그럼 시작해보자 꼬고!

1. Functional Component VS Class Component

Functional Component : 그냥 Plain javascipt 

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

Class Component

class Welcome extends React.Component {
  render() {
		return <h1>Hello, {this.props.name}</h1>;
	}
}

2. 차이점 (1) Syntax

3. 차이점 (2) State

functional Component에서는 state를 쓸 수 없다. 당연히 setState를 못쓴다.

그렇기 때문에 이전에는 functional Stateless components라고도 불렀다.

그래서,,

state를 쓰고 싶으면 Class Component를 써야한다.

아니면!

Parent Component로 state를 올려서 functional component에게 props로 내려주어야한다.

3. 차이점 (3) Lifecycle Hooks

Functional Component에서 lifecycle hokks를 사용하지 못한다. 

state를 사용 못하는 이유와 같은데, Lifecycle hooks는 React에서부터 온 것이기 때문이다.

그래서,,

Lifecycle Hooks를 사용 하려면 Class Compnent를 사용해야 한다.

4. 그렇다면,,, Functional Component를 왜써???????ㅇㅅㅇ?

1. Functional Component는 훨씬 더 쉽게 읽고 테스트 할 수 있다.

  state도 없고, lifecycle도 없이 그냥 javascript 문법이기 때문이다.

2. 코드가 더 적다

3. 코드가 더 간단

4. React Team에서 functional Component 성능을 더 좋아지게 할거랬어,,

5. 결론

그렇다면,,,

어떻게 사용하는 것이 좋을까?

state 와 lifecycle hooks를 사용할거면 당연히  Class Component를 사용 

사용하지 않는 다면~ Functional Component를 사용 하면 된다.

ㅎㅎ; 왜알아본거지

그냥 Functional Component 쓸걸~~ㅎㅎ

뭐 자세히 알아보았다 ^_^ㅎㅎ

저번주에는 개념적인것만 공부했다면 

이번주에는 각각 샘플 프로젝트를 해보며 직접 무엇이 다른지 경험해보았다.

1. Angular

다른언어랑 비교 했을때 가장 다른 점은

Typescript 를 사용한다는 점이고, 더 객체 지향적인 관점에서 개발되는거 같다

직접 해본 느낌은 자바 MVC 패턴으로 개발하는거랑 정말 크게 다르지 않은 느낌이다..

자바가 javascript로 바뀐정도 느낌이랄까

특히 service를 이용해서 구현한부분에서 그렇게 느꼈다.

2. React

JSX를 이용하여 자바스크립트에서 DOM 생성

state는 불변이라 data를 변경시에 setState()를 이용해서 변경한다.

React Native가 있어 Mobile 앱에서 강점이 있다.

다른언어는 html 파일에 마크업방식으로 template을 구성한다면

React는 html 태그에 js 문법도 같이 들어가있는 jsx을 이용한다는게 문법적으로 많이 다르다.

그리고 vue.js와 크게 다른건 

뒤에서 얘기하겠지만..

vue.js 는 data를 직접 변경이 가능하지만 React는 불가능하고 setState()라는 function을 이용한다.

기존에 Vue.js는 해봤어서 

React를 해보니 느낀건 문법적인거 말고는 크게 다른게 없는데..??

부모 자식 컴포넌트 간에 props, emit하는것도 비슷하고 

다 비슷한데??

그런데 JSX하는게 가장크게 다르고 

그거에 따라 건드려 줄수 있는게 더 많다고 한다 ㅎㅎ;; 더 해봐야 알겠지만..

그리고 Vue.js에 있는 개념과 비슷하게

 shouldComponentUpdate() 이런 function이 있는데 이부분은 더 공부 해봐야겠다..

3. Vue.js

한 컴포넌트에 template, script, style 이 모두 들어가 있다.

그리고 앞에서 얘기한거처럼 data를 직접 변경 가능하고

랜더링이 빠르다.

확실히 Vue가 더 가볍고 쉬운건 확실히 맞는거 같다

Vue를 먼저 배워서 그런지 그이후 파생되는 React도 조그만 보면 알 수 있을거 같다

Angular는 내 느낌상 자바 객체지향 개념이 있다보니

또 이것 또한 아는 부분이라

금방 할 수 있을거 같긴한데 

결론

개발자의 숙련도에 따라 결정한다.

초급 개발자 위주이면 Vue.js

중급 개발자 이상이 대다수이면 React

- ThirdParty Library를 잘 조합할 수 있다면 React 그런것이 번거롭다면 Angular

Angular : 프로젝트 규모가 크고 타입스크립트를 선호

-유지보수가 좋다. MVC패턴

-

React : 거대한 생태계와 유연성을 선호 , Native 앱에서 사용가능

-Popularity

Vue.js : 쉽고 가벼운 프레임워크

Front end Framework 3개중 고민하는 사람이 많을 것으로 생각한다.

예전에는 Angular가 대세였지만 요새는 React와 Vue 중에서 고민을 하는거같다

그래서 세개를 다양한 관점에서 비교해 봤다.

해당 사이트를 요약해서 표로 만들어 봤다 

(https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847)

결론은,

Vue and React offers better performance and flexibility than Angular.

Vue and react are more suited for light-weight applications and angular is the best for large UI applications.

Angular is highly opinionated and unlike Vue and React, it offers everything
from routing, templates to testing utilities in its package.

Vue is the most popular, loved and growing framework of Javascript.

개인적인 의견을 붙여보자면,

저는 vue만 해봤는데 ..

해당 사이트에서는 react가 learning curve가 제일 낮다고 했지만 내 생각엔 vue가 제일 낮은거 같다

react를 안해봤지만 vue를 상당히 쉽게 배웠기 때문이다

react를 해보고 다시 리뷰해보자 ㅎㅎ '-'

react는 React Native가 있어 모바일앱을 구현하기 좋아서 모바일을 커버하고 싶다면 

react를 선택하는것도 좋을거 같다

그럼이만

뿅