What is React
작성일 : 2025.01.03
목차
- React 소개
- React vs Vue.js: 프레임워크 비교 분석
- React의 핵심 개념
- React 컴포넌트 생명주기
- Class Components vs Functional Components
- React 상태 관리
- 성능 최적화 전략
- 보안 고려사항
- 실전 활용 시나리오
1. React 소개
React는 Facebook에서 개발한 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. '컴포넌트' 기반의 접근 방식을 통해 재사용 가능한 UI를 만드는 것이 핵심 철학입니다.
1.1 주요 특징
- 컴포넌트 기반: 재사용 가능한 독립적 UI 단위
- Virtual DOM: 효율적인 DOM 업데이트 메커니즘
- 단방향 데이터 흐름: 예측 가능한 상태 관리
- JSX: JavaScript 내 XML 스타일 구문
- 풍부한 생태계: 다양한 라이브러리와 도구 지원
1.2 기술 스택 구성
React 코어
├── React Router (라우팅)
├── Redux/MobX/Zustand (상태 관리)
├── Create React App (개발 도구)
└── React DevTools (디버깅 도구)
2. React vs Vue.js: 프레임워크 비교 분석
2.1 React의 강점
-
큰 생태계
- 방대한 커뮤니티 규모
- 풍부한 서드파티 라이브러리
- 기업용 솔루션 다수 존재
-
유연성
- 자유로운 아키텍처 설계
- 다양한 상태 관리 솔루션
- 서버 사이드 렌더링 (Next.js)
-
타입스크립트 통합
- 우수한 타입스크립트 지원
- 풍부한 타입 정의
- 강력한 IDE 지원
2.2 Vue.js 대비 한계점
-
학습 곡선
- 상대적으로 높은 진입 장벽
- JSX 학습 필요
- 상태 관리 패턴 이해 필요
-
자유도로 인한 복잡성
- 구조화된 가이드라인 부족
- 아키텍처 결정의 어려움
3. React의 핵심 개념
3.1 기본 문법
// 함수형 컴포넌트
function MyComponent({ name }) {
const [count, setCount] = useState(0);
// 파생된 상태
const doubleCount = useMemo(() => count * 2, [count]);
// 부수 효과
useEffect(() => {
console.log(`Count changed to ${count}`);
}, [count]);
return (
<div>
<h1>Hello, {name}!</h1>
<p>Count: {count}</p>
<p>Double: {doubleCount}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
3.2 주요 Hooks
// 상태 관리
const [state, setState] = useState(initialState);
// 부수 효과
useEffect(() => {
// 마운트/업데이트 시 실행
return () => {
// 클린업 함수
};
}, [dependencies]);
// 참조 값
const ref = useRef(initialValue);
// 메모이제이션
const memoizedValue = useMemo(() => computeValue(), [deps]);
const memoizedCallback = useCallback(() => {
doSomething();
}, [deps]);
4. React 컴포넌트 생명주기
4.1 Class 컴포넌트 생명주기
-
마운트 단계
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
-
업데이트 단계
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
-
언마운트 단계
- componentWillUnmount()
4.2 Hooks를 사용한 생명주기 관리
function LifecycleComponent() {
// 마운트
useEffect(() => {
// componentDidMount
return () => {
// componentWillUnmount
};
}, []);
// 업데이트
useEffect(() => {
// componentDidUpdate
}, [dependency]);
// 렌더링
return <div>Component Content</div>;
}
5. Class Components vs Functional Components
5.1 Class Components
class UserProfile extends React.Component {
constructor(props) {
super(props);
this.state = {
userData: null
};
}
async componentDidMount() {
const data = await fetchUserData();
this.setState({ userData: data });
}
render() {
const { userData } = this.state;
return (
<div>
{userData ? (
<UserInfo data={userData} />
) : (
<Loading />
)}
</div>
);
}
}
5.2 Functional Components
function UserProfile() {
const [userData, setUserData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const data = await fetchUserData();
setUserData(data);
};
fetchData();
}, []);
return (
<div>
{userData ? (
<UserInfo data={userData} />
) : (
<Loading />
)}
</div>
);
}
6. React 상태 관리
6.1 Redux 구조
// store/slice.js
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
}
}
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
6.2 Context API
// Context 생성
const UserContext = React.createContext();
// Provider 컴포넌트
function UserProvider({ children }) {
const [user, setUser] = useState(null);
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
}
// Consumer 컴포넌트
function UserProfile() {
const { user } = useContext(UserContext);
return <div>{user.name}</div>;
}
7. 성능 최적화 전략
7.1 컴포넌트 최적화
- 메모이제이션
// 컴포넌트 메모이제이션
const MemoizedComponent = React.memo(MyComponent);
// 값 메모이제이션
const memoizedValue = useMemo(() =>
expensiveComputation(props.data),
[props.data]
);
// 콜백 메모이제이션
const memoizedCallback = useCallback(
() => handleClick(props.id),
[props.id]
);
- 코드 분할
const LazyComponent = React.lazy(() =>
import('./LazyComponent')
);
function App() {
return (
<Suspense fallback={<Loading />}>
<LazyComponent />
</Suspense>
);
}
7.2 렌더링 최적화
- 조건부 렌더링
{isVisible && <ExpensiveComponent />}
- 키 최적화
<div>
{items.map(item => (
<ListItem
key={item.id}
data={item}
/>
))}
</div>
8. 보안 고려사항
8.1 XSS 방어
// 안전한 방식
<div>{userInput}</div>
// 위험한 방식 (필요한 경우에만 사용)
<div dangerouslySetInnerHTML={{ __html: userInput }} />
8.2 프로퍼티 검증
import PropTypes from 'prop-types';
function UserCard({ user }) {
return <div>{user.name}</div>;
}
UserCard.propTypes = {
user: PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
email: PropTypes.string.isRequired
}).isRequired
};
9. 실전 활용 시나리오
9.1 적합한 사용 케이스
-
대규모 웹 애플리케이션
- 소셜 미디어 플랫폼
- 기업용 대시보드
- SaaS 솔루션
-
실시간 애플리케이션
- 채팅 애플리케이션
- 실시간 분석 도구
- 협업 플랫폼
-
단일 페이지 애플리케이션 (SPA)
- 웹 메일 클라이언트
- 온라인 에디터
- 미디어 스트리밍 서비스
9.2 실제 구현 예시
// 실용적인 프로젝트 구조
src/
├── components/
│ ├── common/
│ │ ├── Button/
│ │ ├── Input/
│ │ └── Modal/
│ └── features/
│ ├── UserProfile/
│ └── Settings/
├── pages/
│ ├── Home/
│ └── Dashboard/
├── hooks/
│ ├── useAuth.js
│ └── useForm.js
├── store/
│ ├── slices/
│ │ ├── userSlice.js
│ │ └── settingsSlice.js
│ └── index.js
└── utils/
├── api.js
└── helpers.js
결론
React는 현대 웹 개발의 중심축으로 자리 잡은 강력한 라이브러리입니다. 풍부한 생태계, 강력한 커뮤니티 지원, 그리고 유연한 아키텍처를 제공하여 다양한 규모의 프로젝트에 적합합니다. 지속적인 혁신과 성능 개선을 통해 웹 개발의 미래를 선도하고 있으며, 앞으로도 프론트엔드 개발의 핵심 도구로 자리매김할 것으로 기대됩니다.