[2025 1학기 React.js 스터디] 한혜민 #3주차

✅  리액트는 어쩌다 만들어졌을까?

 

리액트를 본격적으로 배우기 전에, 이 라이브러리가 왜 만들어졌는지 먼저 알아보는 건 매우 중요합니다.

JavaScript만으로 UI를 만들면 벌어지는 일

초기에 우리가 웹에서 UI를 만들 때는 JavaScript와 HTML만으로 동적인 화면을 구성했습니다. 버튼 클릭 시 DOM을 직접 조작하여 값을 바꾸고, 이벤트에 따라 요소들을 추가하거나 제거하는 방식이었죠.

 

하지만 이렇게 작성된 코드는 점점 복잡해지고 유지보수가 어려워졌습니다. 상태가 많아지면 어디서 어떤 DOM을 조작했는지 추적하기 어려워졌고, 같은 UI를 다른 페이지나 상황에서도 반복해서 쓰고 싶을 때도 비효율적이었습니다.

 

 그래서 나온 해결책, 리액트

페이스북 개발팀은 이런 문제를 해결하기 위해 리액트를 만들었습니다.

리액트의 핵심 철학은 다음과 같습니다 :

ㄴ 상태(state)가 변하면, UI는 자동으로 바뀌어야 한다.
ㄴ UI를 컴포넌트로 나누어 독립적으로 관리하자.

즉, 개발자가 DOM을 직접 조작하는 게 아니라, 상태만 관리하면 리액트가 알아서 UI를 "렌더링해주는 방식으로 바뀐 거죠. 이 덕분에 더 예측 가능하고 관리하기 쉬운 코드를 만들 수 있게 되었습니다.

 

 

 

✅  나의 첫번째 리액트 컴포넌트

 

 컴포넌트란?

 

컴포넌트는 리액트에서 UI를 구성하는 최소 단위예요. 쉽게 말해서, HTML 태그처럼 쓸 수 있는 리액트만의 "조각" 이라고 생각하면 됩니다. 예를 들어 <div>, <span> 같은 HTML 태그 대신 내가 직접 만든 <Hello />라는 컴포넌트를 사용할 수 있습니다.

 

컴포넌트 만들어 보기

 

# 1 src/Hello.js 파일 생성 > 먼저 src 폴더 안에 Hello.js라는 파일을 만들어줍니다.

 

# 2 코드 작성

 

 

 

 

#3 컴포넌트 사용하기

App.js에서 Hello 컴포넌트 불러오기

 

 

 

 

#4 결과 확인

 

 

 

 

*** 정리 ***

개념	설명
컴포넌트	UI를 구성하는 가장 작은 단위
JSX	JavaScript 안에서 HTML처럼 태그를 작성하는 문법
<Hello />	내가 만든 컴포넌트를 불러와 사용하는 방식

 

 

 

✅ JSX

 

JSX는 JavaScript XML의 줄임말입니다. 자바스크립트 파일 안에서 마치 HTML처럼 생긴 코드를 작성할 수 있게 해주는 문법이에요.

 

JSX를 사용하면 좋은 점

• UI 구조를 HTML처럼 직관적으로 표현할 수 있다.
• 자바스크립트 코드 안에 HTML을 자연스럽게 녹여 쓸 수 있다.
• 리액트 컴포넌트를 작성할 때 가독성이 훨씬 좋아진다.

JSX 사용 시 주의할 점

• JSX에서는 반드시 하나의 부모 요소로 감싸야 한다.
• 자바스크립트에서 이미 class는 예약어이기 때문에, className이라는 이름을 사용해야 한다.
• HTML에서는 <br>처럼 닫지 않아도 되지만, JSX에서는 모든 태그를 반드시 닫아야 한다.

 

*** 정리 ***

 

항목	설명
JSX	자바스크립트 안에서 HTML처럼 태그를 작성할 수 있는 문법
{} 중괄호	JSX 안에서 자바스크립트 값 또는 표현식 삽입
className	JSX에서는 class가 아닌 className 사용
부모 태그	JSX는 반드시 하나의 부모 태그로 감싸야 함
태그 닫기	JSX는 모든 태그를 반드시 닫아야 함 (<br />)

 

 

 

✅ props 를 통해 컴포넌트에게 값 전달하기

 

props란?

 

props는 컴포넌트에 전달하는 속성값입니다. HTML의 태그에 속성을 넣듯이, 리액트 컴포넌트에도 값을 넘겨줄 수 있다.

 

비구조화 할당 (Destructuring)으로 props 간단하게 받기

 

props.name처럼 계속 props.를 붙이는 게 귀찮다면? 비구조화 할당 문법을 써서 더 깔끔하게 작성할 수 있다.

 

Hello.js

 

App.js

 

Wrapper.js

 

실행화면

*** 정리 ***

개녕	설명
props	부모 컴포넌트가 자식 컴포넌트에 넘기는 데이터
사용 방법	<컴포넌트 속성="값" /> 형태로 전달
접근 방법	props.속성이름 또는 { 속성이름 } 형태로 받기
목적	컴포넌트를 더 유연하고 재사용 가능하게 만들기 위함

 

 

 

 

✅ 조건부 렌더링

 

조건부 렌더링 기본 방법

리액트는 JSX 안에서 자바스크립트 표현식을 사용할 수 있다. 즉, if, 삼항 연산자, AND 연산자 등을 통해 조건에 따라 다른 내용을 보여줄 수 있다.

 

Hello.js

 

App.js

 

실행화면

*** 정리 ***

방법	설명
if 문	JSX 밖에서 조건을 미리 분기
삼항 연산자 조건 ? 값1 : 값2	JSX 안에서 조건에 따라 다른 내용 표시
조건 && 값	조건이 true일 때만 값 렌더링

 

 

 

 

✅ useState 를 통해 컴포넌트에서 바뀌는 값 관리하기

 

상태(state)란?

 

리액트 컴포넌트는 기본적으로 props를 받아서 화면에 표시하는 정적인 구조다. 그런데 UI는 사용자와의 상호작용에 따라 계속 변해야 한다.

 

예를 들어:

• 버튼을 누르면 숫자가 증가해야 하고
• 입력창에 입력하면 글자가 반영되어야 하고
• 체크박스를 누르면 표시가 바뀌어야 한다.

이런 변화하는 데이터를 다루기 위해 사용하는 게 바로 상태(state)이다.

 

useState란?

 

useState는 리액트에서 상태를 사용하게 해주는 함수형 컴포넌트 전용 훅(Hook)입니다.

 

 

Counter.js

 

 

 

버튼을 눌렀을 때 화면에 숫자가 변하는 이유는?

 

바로 setNumber()가 상태를 바꾸면서 컴포넌트를 다시 렌더링하기 때문이다.

 

이게 리액트의 핵심: 상태(state)가 바뀌면 화면(UI)이 다시 그려진다.

 

 

 

*** 정리 ***

항목	내용
useState	함수형 컴포넌트에서 상태를 사용할 수 있게 해주는 훅
상태 값	JSX에서 출력되는 동적인 값
상태 변경 함수	값을 바꾸고 컴포넌트를 리렌더링 시킴
초기값	상태의 시작 값 (ex: useState(0))

 

 

 

✅ Input 상태 관리하기

 

지금까지는 버튼 클릭으로 상태를 변경했지만, 이번에는 사용자가 입력한 텍스트 값을 상태로 관리하는 방법을 알아볼 것이다.

 

목표

• input 태그를 만들고
• 그 안에 입력한 값을 실시간으로 상태로 저장하고
• 화면에 그 값을 바로 반영

핵심 개념

• input의 값은 상태(state)로 관리한다
• onChange 이벤트에서 e.target.value를 사용해서 상태를 업데이트한다
• value={state}로 값을 연결하면 입력값과 상태가 항상 일치한다 (양방향 바인딩)
• 여러 개의 input을 관리할 땐 객체로 묶고, ...spread 문법으로 상태를 업데이트한다

InputSample.js

 

 

*** 정리 ***

개념	설명
useState	입력 값을 저장하는 상태 생성
onChange	input의 변화 감지
e.target.value	input 요소의 현재 값
value 속성	상태와 입력 필드의 값 동기화
여러 필드	객체로 묶어 관리 ({ name, nickname })

 

 

 

✅ 여러개의 Input 상태 관리하기

 

이번엔 한 폼 안에 여러 개의 input이 있을 때, 어떻게 효율적으로 상태를 관리할 수 있을지 알아보겠다.

 

input이 많아질수록 상태 관리가 번거로워진다

 

처음에는 input 하나만 관리하면 되니까 useState 하나로 충분하다.
하지만 이름, 닉네임, 이메일처럼 input이 늘어나면?

각각 이렇게 만들어야 할 것이다 :

• const [name, setName] = useState('')
• const [nickname, setNickname] = useState('')
• const [email, setEmail] = useState('')
• …

이렇게 되면 코드도 길어지고, 관리도 복잡해진다.

 

해결 방법: 하나의 객체로 input 값들 통합 관리하기

 

이럴 땐 input 값들을 하나의 객체로 묶어서 상태로 관리하면 훨씬 깔끔하다.
예를 들어 이름과 닉네임을 함께 다루고 싶다면, 이런 구조로 생각할 수 있다 :

• inputs = { name: '', nickname: '' }

이제 입력값이 바뀔 때마다 이 객체를 업데이트하면 될 것이다.

 

 

InputSample.js

 

 

실행 결과

 

*** 정리 ***

 

항목	설명
상태 통합	여러 input 값을 하나의 객체로 관리 (useState({ name, nickname }))
onChange	name 속성을 기준으로 동적으로 값 업데이트
불변성 유지	...inputs로 기존 객체 복사 후 수정
초기화	setInputs({ ... })로 값 리셋

 

 

 

 

 

 

 

 

 

 

 

 

.

.

.

 

끝 ~~~~~~~~~~~~~~~~~~~~~~~~~