JSX, REACT

HTML 처럼 보이지만 자바스크립트

반복문 : 키값 필수

 

import , export는 es6(자바스크립트 6번째 표준안)에서 모듈을 불러오고 내보내는 방법

import Hello from "./Hello.js";
import World from "./World.js";

export default function App(){
	return {
    	<div>
        	<Hello></Hello>
            <World></World>
        </div>
	}
}

Props : 구조분해할당 구문을 잘 활용하자, 특정 Props에 기본 값(defaultProps)을 줄 수 있다. Props는 읽기 전용이다.

function App() {
	return (
    	<div>
        	<MyComponent value={'test'}/>
        </div>
    );
}

function MyComponent(props) {
	return <div>{props.value}</div>;
}

State : 컴포넌트가 스스로 상태를 관리할 수 있게 함,  State 값이 변하면 컴포넌트가 리렌더링 됨, 렌더링 사이클에서 값이 보존 됨

export default function App() {
	let value = 0;
    
    return (
    	<div>
        	<h1>value: {value}</h1>
            <button onClick={() => {
            	value = value + 1;
            	}}
            >
                Increase value
            </button>
            <button>Reset value</button>
        </div>
    )
}

hooks : React 16.8부터 도입된 기능, 함수형 컴포넌트에서 상태 관리와 React의 라이프사이클 메서드를 사용할 수 있게 해준다. 기존 클래스형 컴포넌트에서는 상태관리와 라이프사이클 메서드를 사용하려면 this를 통해 복잡한 구조를 만들어야 하지만 Hooks는 이런 복잡성을 줄여준다.

 

주의할 점은 hooks의 바깥쪽에 if문을 걸면 안된다는 것이다. useEffect 같은 hooks는 배열처럼 관리되는데 예를 들어 [useS, useE, useC] 이런식으로 있는데 조건문이 걸려있어서 하나를 수행하지 않는 다면 순서에 충돌이 나서 오류가 나므로 만약 조건문이 필요하다면 useEffect 안의 로직에 if문을 걸어야한다.

>> 

React에서 Hooks는 함수형 컴포넌트 내부에서 일정한 순서로 호출되어야 합니다.
Hooks를 조건문 안에서 호출하면, 이 호출 순서가 변경되어 React의 내부 상태 관리 로직에 문제가 발생할 수 있습니다.

React는 컴포넌트 내부의 모든 Hooks 호출을 호출 순서에 따라 배열처럼 관리합니다.
이러한 규칙은 다음과 같이 요약됩니다:

1. Hooks는 컴포넌트의 최상위 레벨에서만 호출해야 합니다.
2. 조건문, 반복문, 함수 내부에서 호출하면 안 됩니다.

React는 컴포넌트가 렌더링될 때마다 Hooks 호출 순서를 기반으로 상태와 효과를 관리합니다.
예를 들어, 컴포넌트의 useState나 useEffect가 다음과 같이 관리된다고 가정합니다:

// React가 관리하는 Hooks 배열 (추상적으로 표현)
[
  useState_1, // 첫 번째 호출된 useState
  useEffect_1, // 첫 번째 호출된 useEffect
  useCallback_1, // 첫 번째 호출된 useCallback
]

문제 상황 : 

if (condition) {
  useEffect(() => {
    console.log("Condition met");
  }, []);
}

위 코드에서 condition이 true일 때만 useEffect가 호출되므로, React는 이 호출 순서를 예상할 수 없습니다.
만약 다음 렌더링에서 condition이 false라면, Hooks 배열의 순서가 변경되어 오류가 발생합니다.

React 오류 메시지

이러한 상황에서 React는 다음과 같은 오류를 발생시킵니다:

Error: Hooks can only be called at the top level. This violates the Rules of Hooks.

조건문이 필요한 경우의 올바른 해결 방법

조건문은 Hooks 호출이 아닌, Hooks 내부의 로직에 적용해야 합니다.

올바른 코드 : 

useEffect(() => {
  if (condition) {
    console.log("Condition met");
  }
}, [condition]); // condition이 변경될 때만 실행

useState를 조건문 안에서 호출하면, 상태 배열의 순서가 달라져 React의 상태 관리가 엉망이 될 수 있습니다.

잘못된 코드 : 

if (isEnabled) {
  const [state, setState] = useState(0);
}

올바른 코드 : 

const [state, setState] = useState(0);
if (isEnabled) {
  setState(1); // 상태 변경 로직만 조건문 안에 둠
}

<<

 

React에서 제공하는 기본 Hooks : useState, useEffect, useCallback

사용자 지정 Hooks는 개발자가 use로 시작하는 함수를 정의해서 만든 특별한 Hooks입니다.

예를 들어 아래와 같다.

function useCustomHook() {
  const [value, setValue] = useState(0);
  // 사용자 정의 로직 추가
  return [value, setValue];
}

useState : 클래스 컴포넌트의 this.state를 대체, 상태 관리용

useEffect : 컴포넌트가 렌더링 될 때, 특정 작업을 실행, 사이드 이펙트 처리용 (API 호출, DOM 조작 등).

useCallback : 메모이제이션(Memoization : 함수의 실행 결과를 캐싱(Cache) 하여 동일한 입력 값으로 다시 호출될 때 계산을 반복하지 않고, 기존에 저장된 결과를 재사용하는 최적화 기법 )으로 함수를 캐싱하여 렌더링 성능 최적화

onMounted (Vue)

• 컴포넌트가 DOM에 마운트된 후 실행됩니다.
• Vue 라이프사이클 메서드 중 하나로, 컴포넌트가 생성된 이후의 작업을 처리합니다.

useEffect (React)

• React에서는 컴포넌트가 마운트(초기 렌더링), 업데이트, 언마운트될 때 동작을 설정할 수 있습니다.
• Vue의 onMounted와 가장 유사한 기능은 useEffect에서 두 번째 매개변수로 빈 배열을 전달한 경우입니다:

useEffect(() => {
  console.log("컴포넌트가 마운트되었습니다.");
}, []); // 빈 배열은 마운트 시 한 번만 실행

 

Node.js 는 브라우저 밖에서도 (서버 구축 등) javascript를 실행할 수 있게 해주는 런타임 환경

특징 : 오픈 소스 javascript 엔진인 크롬 v8 기반으로 동작

 

npm(node package manager) : js를 위한 패키지 관리자, 공개된 js 라이브러리들을 쉽게 설치해 사용할 수 있음, node.js는 npm을 포함하고 있음(설치 시 같이 설치됨)

 

 

**라이프사이클(Lifecycle)**은 컴포넌트가 생성, 업데이트, 제거되는 과정에서 특정 시점에 호출되는 메서드나 함수입니다. Vue와 React 모두 컴포넌트의 상태를 관리하고 특정 시점에서 로직을 실행할 수 있도록 라이프사이클을 제공합니다. 그러나 구현 방식과 철학은 다릅니다.

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeUnmount -> unmounted

 

constructor -> componentDidMount -> componentDidUpdate -> componentWillUnmount