React

학습 맥락

• 백엔드 전문가를 목표로하지만 중소~중견기업에서 커리어를 시작하는 1년차 개발자

목표

• ✅ "React로 간단한 CRUD 화면 만들 수 있습니다" 수준
• ✅ 면접에서 "프론트도 할 줄 압니다" 어필
• ✅ 실무에서 간단한 관리자 페이지 정도는 혼자 처리

 

학습 범위 (우선순위별)

1. 기본 개념 (1주)

• JSX 문법
• 컴포넌트 (함수형 컴포넌트만)
• Props
• State (useState)
• 이벤트 처리 (onClick, onChange)

2. 핵심 Hooks (1주)

• useState: 상태 관리
• useEffect: API 호출, 생명주기
• 이 두 개만 알아도 80% 커버

3. API 통신 (3-4일)

• axios 또는 fetch
• GET, POST, PUT, DELETE
• 로딩/에러 상태 처리
• 당신은 백엔드니까 이 부분은 빠르게 이해할 것

4. 간단한 CRUD (3-4일)

• 목록 조회 (map)
• 등록 폼 (input, form submit)
• 수정/삭제
• 토이프로젝트 1개로 익히기

🟡 권장 (있으면 좋음)

5. 라우팅 (2-3일)

• React Router
• 페이지 이동
• URL 파라미터

6. 스타일링 (2-3일)

• Tailwind CSS (빠르게 배움)
• 또는 styled-components
• 디자인 감각은 필요 없음, 그냥 깔끔하게만

7. 상태 관리 기초 (선택)

• Context API 개념만
• Redux는 건너뛰어도 됨 (중소기업에서 안 쓰는 곳 많음)

React사용이유

React 없이 (전통적 방식)

// HTML 문자열을 직접 조작
let html = '<ul>';
for (let i = 0; i < posts.length; i++) {
html += '<li>' + posts[i].title + '</li>';
        }
html += '</ul>';

// 마지막에 DOM에 삽입
document.getElementById('app').innerHTML = html;

 

특징:

• ❌ HTML과 로직이 섞여 있음
• ❌ 문자열로 HTML 만들기 (따옴표, 플러스 지옥)
• ❌ DOM을 직접 조작

React 방식

리액트는 상태관리 후 이를 html 요소들과 연결시켜 주는 방식으로 동작.

function Component() {
    // 1. 데이터 저장소 (상태)
  const [data, setData] = useState(초기값);

    // 2. 로직 (API, 계산, 이벤트 처리)
    useEffect(() => {
            // API 호출 등
            setData(새로운값); // 상태에 저장
  }, []);

    // 3. HTML 선언 (데이터를 어떻게 보여줄지)
    return (
            <div>
            {data}
            </div>
  );
}

특징:

• ✅ 로직과 HTML 분리
  • 위쪽: JavaScript 로직 (데이터 가져오기, 상태 관리)
  • return 부분: HTML 선언
• ✅ HTML을 문자열이 아닌 "템플릿"처럼 작성
  • 따옴표 없이 그냥 <ul>, <li> 작성
  • JavaScript 값은 {변수} 로 삽입
• ✅ 데이터를 "상태"로 저장
  • posts 변수에 일시적 저장
  • React가 알아서 화면에 반영

JSX

JavaScript + XML (HTML 비슷한 것) :

• HTML 태그 덩어리를 JavaScript의 값처럼 취급
• HTML을 JavaScript 값처럼 쓸 수 있게 해주는 문법

// 일반 JavaScript로 HTML 만들기 (복잡함)
const element = document.createElement('h1');
element.textContent = 'Hello';
        document.body.appendChild(element);

// JSX로 HTML 만들기 (간단함)
const element = <h1>Hello</h1>;

 

규칙 : JavaScript 값 넣을 땐 중괄호

const name = "변상화";
return <h1>{name}</h1>;

 

규칙 : 하나로 묶어야 함

// ❌ 안됨
return (
  <h1>제목</h1>
  <p>내용</p>
        );

// ✅ 됨
        return (
  <div>
    <h1>제목</h1>
    <p>내용</p>
  </div>
);