이럴 때 사용하는 방법이 바로 상태 끌어올리기(Lifting State Up)입니다.

1. 문제 상황: 두 자식 컴포넌트가 같은 상태를 써야 할 때

예를 들어, 하나는 입력을 받고, 다른 하나는 그 값을 출력하는 구조를 생각해볼 수 있어요.

그런데 입력 컴포넌트의 상태를 출력 컴포넌트에서 사용할 수 없어요.
해결책은? 부모 컴포넌트로 상태를 끌어올리는 것입니다.

2. 예제 코드

function Parent() {
  const [name, setName] = useState('');

  return (
    <div>
      <NameInput name={name} setName={setName} />
      <NameDisplay name={name} />
    </div>
  );
}

function NameInput({ name, setName }) {
  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="이름을 입력하세요"
    />
  );
}

function NameDisplay({ name }) {
  return <p>안녕하세요, {name}님!</p>;
}

핵심은 상태(name)와 상태 변경 함수(setName)를 부모에서 만들고, 자식들에게 props로 전달하는 것입니다.

3. 이렇게 이해해보세요

• 데이터의 “원본”은 항상 부모에 존재
• 입력 컴포넌트는 값을 수정할 수 있는 setName을 받음
• 출력 컴포넌트는 그 값을 표시하기만 함

상태 끌어올리기 흐름도

아래 그림은 부모 컴포넌트에 상태를 올리고, 자식들끼리 데이터를 공유하는 흐름을 보여줍니다:

The post ⤴️ 상태 끌어올리기 – 컴포넌트 간 데이터 공유하는 법 first appeared on Naver Ending Study.

이번 글에서는 리스트 렌더링의 기본과 함께, 꼭 필요한 key 속성에 대해 설명합니다.

1. 배열을 JSX로 바꾸기 – map() 함수

JS의 map() 함수는 배열을 반복해 각각의 요소를 원하는 형태로 바꿔줍니다.

const fruits = ['사과', '바나나', '딸기'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}

위 코드에서 fruits 배열의 요소들을 <li> 태그로 반복 출력하고 있어요.

2. key 속성은 꼭 넣자!

React는 리스트를 렌더링할 때 각 항목을 구분하기 위해 key를 사용합니다. key가 없거나 중복되면 성능 저하나 UI 문제(예: 깜빡임)가 생길 수 있어요.

위 예제를 개선해볼게요:

{fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li>
))}

여기선 index를 key로 썼지만, 가능하면 고유한 값(예: id)을 사용하는 것이 더 좋습니다.

3. 고유 ID가 있는 경우

const users = [
  { id: 1, name: '철수' },
  { id: 2, name: '영희' }
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

key={user.id}는 최적의 방식입니다. 이 값은 항목이 변해도 유지되기 때문이죠.

정리

• React에서 배열을 출력할 땐 map()을 사용해 반복합니다
• key는 필수이며, 각 항목을 고유하게 구분하는 역할을 합니다
• 가능하면 index 대신 고유한 id를 key로 사용하세요

리스트 렌더링 흐름도

아래 그림은 배열 → 반복 → JSX → 렌더링 과정을 시각화한 흐름도입니다:

The post [React] 📋 React에서 배열 데이터 화면에 출력하기 – 리스트 렌더링 first appeared on Naver Ending Study.

이럴 때 사용하는 것이 조건부 렌더링입니다.

1. 가장 기본적인 방법 – if문

JSX 밖에서 조건을 검사한 뒤, 원하는 UI를 리턴할 수 있어요.

function WelcomeMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>환영합니다!</p>;
  } else {
    return <p>로그인 해주세요.</p>;
  }
}

단점은 간단한 조건이라도 코드가 길어진다는 점입니다.

2. JSX 안에서는 삼항 연산자 사용

JSX 안에서는 {조건 ? A : B} 형태로 간결하게 쓸 수 있어요.

function WelcomeMessage({ isLoggedIn }) {
  return (
    <p>{isLoggedIn ? '환영합니다!' : '로그인 해주세요.'}</p>
  );
}

삼항 연산자는 **조건에 따라 두 가지 경우를 나눌 때** 쓰면 좋습니다.

3. 특정 조건일 때만 표시 – && 연산자

조건이 참일 때만 어떤 요소를 보여주고, 거짓이면 아무것도 안 보이게 하고 싶을 땐 && 연산자를 사용합니다.

function Alert({ show }) {
  return (
    <div>
      {show && <p style={{ color: 'red' }}>경고: 잘못된 접근입니다.</p>}
    </div>
  );
}

show가 false일 경우에는 아무것도 렌더링되지 않습니다.

정리

• if문은 JSX 바깥에서 조건 분기를 할 때 사용
• 삼항 연산자 ?:는 간단한 두 갈래 분기를 JSX 안에서 처리할 때 유용
• && 연산자는 특정 조건이 참일 때만 요소를 보여주고 싶을 때 사용

추가 팁

• 조건이 복잡해지면 컴포넌트를 나누는 것이 더 깔끔해요
• null을 반환하면 아무것도 표시되지 않습니다 (렌더링 생략)

조건부 렌더링 흐름도

다음 그림은 조건에 따라 화면에 보이는 컴포넌트가 어떻게 달라지는지를 보여줍니다:

The post [React] 🎭 조건부 렌더링 – 리액트에서 보여줄지 말지 결정하기 first appeared on Naver Ending Study.

이를 막기 위해 사용하는 것이 바로 preventDefault()예요.

1. 기본 동작을 막는 이유

아래처럼 작성하면, 폼을 제출했을 때 전체 페이지가 리로드됩니다.

<form onSubmit={handleSubmit}>
  <input />
  <button type="submit">제출</button>
</form>

이때 handleSubmit 함수에서 e.preventDefault()를 꼭 호출해줘야 합니다.

2. 기본 예제 코드

import { useState } from 'react';

function SignupForm() {
  const [form, setForm] = useState({
    name: '',
    email: ''
  });

  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({
      ...prev,
      [name]: value
    }));
  }

  function handleSubmit(e) {
    e.preventDefault(); // 새로고침 방지
    console.log('폼 제출됨:', form);
    alert(`${form.name}님, 가입이 완료되었습니다!`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="이름"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="이메일"
      />
      <button type="submit">가입하기</button>
    </form>
  );
}

3. 핵심 요약

• form 태그를 사용할 때 onSubmit 이벤트로 처리합니다
• e.preventDefault()를 호출해야 페이지가 새로고침되지 않아요
• 제출 시 입력값을 저장하거나 서버로 보낼 수 있습니다

폼 제출 처리 흐름도

입력 → 상태 저장 → 제출 → 기본 동작 막기 → 데이터 처리 흐름을 아래 그림으로 정리해보세요.

The post [React] 📨 React에서 폼 제출 처리하기 – preventDefault()로 새로고침 막기 first appeared on Naver Ending Study.

오늘은 객체 상태를 사용해서 여러 입력값을 하나의 상태로 관리하는 방법을 배워봅시다!

1. 상태를 객체로 만들어요

아래와 같이 form 상태를 객체 형태로 만들고, 각 입력 필드의 이름을 키(key)로 사용합니다.

const [form, setForm] = useState({
  name: '',
  email: ''
});

이제 입력값이 바뀔 때마다 해당 키만 업데이트하면 돼요!

2. onChange 함수 재사용하기

모든 input에 같은 handleChange 함수를 연결해도 됩니다. e.target.name을 활용해 어떤 필드가 바뀌었는지 자동으로 구분하거든요.

function handleChange(e) {
  const { name, value } = e.target;
  setForm(prev => ({
    ...prev,
    [name]: value
  }));
}

이제 name="email" 또는 name="name" 속성만 잘 붙이면 완성!

3. 전체 예제 코드

function SignupForm() {
  const [form, setForm] = useState({
    name: '',
    email: ''
  });

  function handleChange(e) {
    const { name, value } = e.target;
    setForm(prev => ({
      ...prev,
      [name]: value
    }));
  }

  return (
    <div>
      <input
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="이름"
      />
      <input
        name="email"
        value={form.email}
        onChange={handleChange}
        placeholder="이메일"
      />
      <p>
        이름: {form.name} <br />
        이메일: {form.email}
      </p>
    </div>
  );
}

상태 업데이트 흐름도

아래 그림은 입력값이 객체 상태에 저장되고, 해당 값을 UI에 반영하는 과정을 보여줍니다:

핵심 요약

• 여러 입력값은 객체로 묶어서 상태 관리하면 훨씬 간단해요
• name 속성과 e.target.name을 활용하면 onChange 함수 재사용이 가능해요
• ...prev로 이전 값을 보존한 후 업데이트하세요

The post [React] 🧾 React에서 여러 입력 필드를 한 번에 관리하는 법 first appeared on Naver Ending Study.

1. 상태(state)는 무엇인가요?

상태란 컴포넌트 내부에서 바뀌는 값입니다. 예를 들어 버튼을 클릭할 때마다 숫자가 올라간다면, 이 숫자가 바로 상태입니다.

리액트에서는 useState라는 함수를 사용해서 상태를 만듭니다.

2. useState 기본 사용법

useState는 리액트에서 제공하는 Hook 중 하나로, 이렇게 사용합니다:

import { useState } from 'react';

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

  return (
    <div>
      <p>지금까지 {count}번 클릭했어요!</p>
      <button onClick={() => setCount(count + 1)}>
        클릭!
      </button>
    </div>
  );
}

설명:

• useState(0): 초깃값 0으로 상태(count)를 만들어요
• setCount: 상태를 바꾸는 함수입니다
• onClick 이벤트로 클릭할 때 setCount를 실행합니다

상태 변경 흐름 그림

아래 그림은 버튼을 누를 때마다 상태가 어떻게 바뀌는지를 나타냅니다:

클릭할 때마다 새로운 값으로 다시 렌더링되어 숫자가 업데이트됩니다.

3. 정리

• useState를 사용하면 상태를 만들 수 있다
• 상태가 바뀌면 컴포넌트는 자동으로 다시 그려진다
• set함수를 호출해야만 상태가 바뀐다

직접 실습해보기

아래 코드를 App.jsx 안에 붙여서 직접 실습해보세요!

import { useState } from 'react';

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

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>클릭 수: {count}</h1>
      <button onClick={() => setCount(count + 1)}>누르기</button>
    </div>
  );
}

The post [React] 리액트 상태(state)란? – useState로 버튼 클릭 수 세기 first appeared on Naver Ending Study.

1. 리액트 앱 만드는 법

리액트를 처음부터 설치하는 가장 쉬운 방법은 Vite 또는 Create React App을 쓰는 것입니다.
요즘은 Vite가 빠르고 가벼워서 많이 사용되고 있어요.

# 설치 (Node.js가 필요해요)
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

http://localhost:5173 에 접속하면 리액트 앱이 실행됩니다!

2. 폴더 구조 간단히 보기

my-react-app/
├─ src/
│  ├─ App.jsx      ← 우리가 편집할 메인 컴포넌트
│  └─ main.jsx     ← 앱 시작 지점 (entry point)
├─ index.html
└─ package.json

우리는 App.jsx 파일에서 화면에 나타날 내용을 작성할 거예요.

3. 첫 번째 컴포넌트 만들기

컴포넌트는 그냥 함수 하나라고 생각하면 됩니다.

function Hello() {
  return <h1>안녕하세요, React!</h1>;
}

이제 이 컴포넌트를 App.jsx 안에서 사용해볼 수 있어요.

function App() {
  return (
    <div>
      <Hello />;
    </div>;
  );
}

<Hello />는 우리가 만든 컴포넌트를 HTML 태그처럼 사용하는 것입니다.

컴포넌트 구조 다이어그램

아래 그림은 컴포넌트가 실제로 어떻게 작동하는지를 보여줍니다:

App 컴포넌트가 Hello 컴포넌트를 불러오고, 최종적으로 브라우저에는 “안녕하세요, React!”가 나타납니다.

4. 꼭 알아둘 문법 2가지

• 컴포넌트 이름은 반드시 대문자로 시작!
  hello() → Hello()
• return 안에는 JSX 사용
  JSX는 JavaScript 안에 HTML처럼 코드를 쓸 수 있는 문법입니다.

실습 팁: 나만의 인사말 만들기

function Greeting(props) {
  return <h2>안녕하세요, {props.name}님</h>;
}

그리고 이렇게 써보세요:

<Greeting name="지민" />;
<Greeting name="민수" />;

리액트는 props(속성)을 통해 다른 데이터를 전달할 수 있어요.

정리

• 리액트 앱은 Vite로 간단히 만들 수 있다
• 컴포넌트는 함수다! → <컴포넌트이름 /> 으로 사용
• JSX 문법을 사용해서 HTML처럼 UI를 작성한다
• props를 통해 컴포넌트에 값을 전달할 수 있다

The post [React] 🚀 리액트 앱 시작하기 – 첫 번째 컴포넌트 만들기 first appeared on Naver Ending Study.

웹사이트는 어떻게 동작할까?

웹사이트는 기본적으로 아래와 같은 흐름으로 동작해요:

1. 사용자가 버튼을 누른다
2. 화면의 어떤 내용이 바뀐다
3. 이걸 위해 HTML/CSS/JavaScript가 협력한다

여기서 문제가 생깁니다.

• 버튼을 누를 때마다 화면을 직접 조작(DOM 조작) 해야 해요.
• 상태가 많아질수록 코드가 복잡해지고 실수하기 쉬워요.

전통적인 방식

• 사용자가 버튼을 누름
• JavaScript가 직접 <div>의 텍스트를 바꿔줌
• 여러 개의 상태를 일일이 추적해야 함

그래서 나온 게 리액트!

리액트는 이걸 훨씬 깔끔하고 효율적으로 처리할 수 있게 해줘요.

• 데이터(state)가 바뀌면
• 리액트가 자동으로 UI를 다시 그려줘요

“데이터 중심”으로 UI를 만드는 방식이라고 생각하면 돼요.

비유로 이해해보자

리액트를 처음 배우는 사람에게 가장 좋은 비유는 ‘자동 계산기’예요.

• 계산기에 숫자를 입력하면 자동으로 결과가 갱신되죠?
• 우리가 버튼을 누를 때마다 결과를 다시 계산할 필요는 없어요.
• 리액트는 화면도 이렇게 자동으로 다시 계산해주는 도구예요.

리액트의 핵심 요소 3가지

리액트는 크게 아래 3가지로 구성돼요:

간단한 예제 코드

function Welcome() {
  return <h1>안녕하세요, React!</h1>;
}

이건 “Welcome”이라는 이름의 컴포넌트를 정의한 거예요.
<Welcome />이라고 쓰면 화면에 “안녕하세요, React!”가 나타나죠.

마치 내가 HTML 태그를 새로 만든 것처럼 쓸 수 있어요.

1. 사용자 입력 →
2. 상태(state)가 바뀜 →
3. 리액트가 새로운 UI를 계산 →
4. 화면이 자동으로 업데이트됨

이 모든 걸 리액트가 자동으로 해주는 게 핵심이에요.

정리

• 리액트는 데이터 중심으로 UI를 만드는 도구예요.
• 복잡한 화면도 더 예측 가능하고 효율적으로 만들 수 있어요.
• 컴포넌트와 상태를 기반으로 작동하며, 변화에 따라 UI를 다시 그려줘요.

The post [React] 🧠 리액트란 무엇인가? first appeared on Naver Ending Study.

useMutation 에 파라메터로 넘기는 mutaionFn, onMutate, onSettled, onSuccess 등이 리렌더링 시 변경될 경우, mutate() 를 호출 하면 각 상황에서 변경된 함수가 호출되는 것으로 봐서 그럴 수도 있어 보인다.

그렇다면 mutate() 를 호출 해서 mutationFn 이 이미 실행 중인 상황에서 리렌더링이 일어나 onSuccess 등이 변경 되고, 그 후 mutationFn 의 실행이 완료된다면 어떻게 될까? mutationFn 이 성공적으로 수행된 후 호출 되는 onSuccess 는 앞서 mutate() 가 호출 되었을 당시의 onSuccess 함수가 아니라 리렌더링 중 변경된 onSuccess 함수가 호출된다.

실제 react-query 가 어떻게 구현되어 있는지 살펴보자.

  const [observer] = React.useState(
    () =>
      new MutationObserver<TData, TError, TVariables, TContext>(
        queryClient,
        options,
      ),
  )

useMutation 의 구현을 보면 observer 라는 state 를 만들어 쓰는 것을 볼 수 있다.

  React.useEffect(() => {
    observer.setOptions(options)
  }, [observer, options])

useMutation 에 파라메터로 넘어가는 옵션이 변경될 경우, 이 observer state 의 setOptions() 를 호출 하여 변경해 주게되며,

  const mutate = React.useCallback<
    UseMutateFunction<TData, TError, TVariables, TContext>
  >(
    (variables, mutateOptions) => {
      observer.mutate(variables, mutateOptions).catch(noop)
    },
    [observer],
  )

우리가 useMutation() 의 결과로 반환받는 mutate 는 useCallback() 을 사용하여 만드는데, 의존성 목록에는 observer 만 들어가 있어 mutate 는 새로 만들어지지 않는다.

좀 더 안 쪽을 살펴 보자. observer 의 mutate() 를 호출 했을때, 즉, 우리가 useMutation()에서 반환 받은 mutate() 함수를 호출 했을 때 무슨일이 일어나는걸까?

  mutate(
    variables?: TVariables,
    options?: MutateOptions<TData, TError, TVariables, TContext>,
  ): Promise<TData> {
    this.mutateOptions = options

    if (this.currentMutation) {
      this.currentMutation.removeObserver(this)
    }

    this.currentMutation = this.client.getMutationCache().build(this.client, {
      ...this.options,
      variables:
        typeof variables !== 'undefined' ? variables : this.options.variables,
    })

    this.currentMutation.addObserver(this)

    return this.currentMutation.execute()
  }

mutate() 가 호출 되는 시점에 현재의 옵션을 넘겨서 Mutation 객체를 새로 만들고, 마지막에 Mutation.execute() 함수를 호출해 준다.

async execute(): Promise<TData> {
    const executeMutation = () => {
      this.retryer = createRetryer({
        fn: () => {
          if (!this.options.mutationFn) {
            return Promise.reject('No mutationFn found')
          }
          return this.options.mutationFn(this.state.variables!)
        },
...
      })

      return this.retryer.promise
    }

...
      const data = await executeMutation()

      // Notify cache callback
      await this.mutationCache.config.onSuccess?.(
        data,
        this.state.variables,
        this.state.context,
        this as Mutation<unknown, unknown, unknown, unknown>,
      )
...
  }

Mutation.execute() 는 생성 시 넘겨 받았던 options의 mutationFn 을 호출 하고, 그 결과에 따라 onSuccess 등을 호출 해 준다.

여기까지 봤을때는, mutate() 호출 시 객체를 생성하고, 필요한 정보는 해당 객체가 다 가지고 있는 형태이므로 이후, useMutation() 이 새로 호출되고 옵션이 바뀌더라도, 현재 실행중인 mutate 에는 영향을 미치지 않을 것으로 보인다.

그런데 아직 보지 못한 곳이 있다. observer의 setOptons().

  setOptions(
    options?: MutationObserverOptions<TData, TError, TVariables, TContext>,
  ) {
    const prevOptions = this.options
    this.options = this.client.defaultMutationOptions(options)
    if (!shallowEqualObjects(prevOptions, this.options)) {
      this.client.getMutationCache().notify({
        type: 'observerOptionsUpdated',
        mutation: this.currentMutation,
        observer: this,
      })
    }
    this.currentMutation?.setOptions(this.options)
  }

뭔가 이유가 있겠지만, 개인적으로는 좀 의아한데… 마지막에 현재 mutation, 즉, 마지막으로 mutate() 호출될 당시의 mutation 객체의 옵션을 같이 바꿔준다.

이로인해, mutaionFn 이 실행 중 useMutation의 옵션이 바뀌게 되면, mutationFn 이 끝난 후 처리는 바뀐 옵션대로 하게되는 것이다.

여기서 useMutation() 사용할때 한 가지 주의 사항이 생긴다. mutate()를 호출한 후 useMutation()의 옵션이 변하는 경우에 대해 고려하라는 것.

의도한게 아니라면, mutate() 호출이 완료되기 전에 useMutation() 의 옵션이 변경된는 상황은 막아야 한다. 보통 react-query 를 사용하는 목적을 생각해보면, mutationFn 을 API 호출 작업일 것이고, 해당 작업은 서버나 네트워크 상황 등에 따라 매우 느리게 끝날 가능성이 있다. 그리고, 그 사이 useMutation()의 옵션에 영향을 주는 state 가 변경되어 리렌더링이 일어나면, mutationFn 이 완료되었을 때는 의도치 않은 작업이 수행될 수 있다.

The post [react-query] 리렌더링 시 useMutation 의 동작과 주의사항 first appeared on Naver Ending Study.