React 중요도 정리

1. 상태 관리 (State): 컴포넌트 상태 관리

• 예시: useState로 버튼 클릭 시 상태 변화 처리

  const [count, setCount] = useState(0);
  <button onClick={() => setCount(count + 1)}>Click me</button>

2. 렌더링 최적화: 불필요한 렌더링을 줄이는 기법

• 예시: React.memo로 컴포넌트 렌더링 최적화

const MemoizedComponent = React.memo(Component);

• 예시: useCallback을 사용해 함수의 재생성을 방지

const handleClick = useCallback(() => { console.log('clicked'); }, []);

3. 이벤트 처리: 사용자 상호작용 처리

• 예시: 클릭 이벤트 처리

const handleClick = () => { console.log('Button clicked'); };
<button onClick={handleClick}>Click me</button>

4. 컴포넌트 구조화: 재사용성과 가독성을 위한 컴포넌트 분리

• 예시: Button 컴포넌트 분리하여 재사용

const Button = ({ label, onClick }) => <button onClick={onClick}>{label}</button>;

5. Hooks 사용: useState, useEffect 등으로 로직 관리

• 예시: useEffect로 컴포넌트가 마운트될 때 데이터 가져오기

useEffect(() => {
  fetchData();
}, []);

6. 라우팅 (React Router): 페이지 이동을 위한 라우팅 처리

• 예시: react-router-dom을 이용해 라우팅 처리

<Route path="/" component={Home} />
<Link to="/about">About</Link>

7. Context API: 데이터 공유를 위한 전역 상태 관리

• 예시: React.createContext와 useContext로 상태 공유

const ThemeContext = React.createContext('light');
const theme = useContext(ThemeContext);

8. 폼 처리: 사용자 입력과 폼 데이터 처리

• 예시: useState로 폼 상태 관리

const [input, setInput] = useState('');
<input value={input} onChange={(e) => setInput(e.target.value)} />