241128 React 1차시

[heesodayo]

금일 진행사항

1. 리액트 구동 환경 세팅
2. 자바스크립트 코드 복습
3. GPT 활용 리액트 작동 기본 원리 학습
4. 인풋필드 리액트 컴포넌트로 제작해보기 ✅입력된 아이디 데이터로 실시간 환영문구에 반영되도록 만들어보기
5. 버튼 리액트 컴포넌트 제작 ✅버튼 누르면 계산해서 카트에 항목 표시
6. 세부 코드 스터디

느낀점

• 리액트 JSX 문법이 좀 이상하게 느껴지긴 하지만, 결과적으로 HTML 없이 한번에 쓸 수 있어서 편하긴 했다... 그리고 계속 쓰다보니 개인적으로 JSX가 더 직관적이어서 좋다는 생각이 들었다.
• 아직 HTML, CSS, JS 문법도 익숙하지 않은데... 이번엔 JSX로 작성해보려고 하니까 소화가 잘 안된다^^;;ㅋㅋㅋㅋ
• 컴포넌트가 기능단위로 쪼개져야 한다는 말이 무슨 말인지 이해했다.
• 개발자가 기능 구현시 어떤식으로 세세하게 생각하는지 약간은 더 이해하게 되었다. 앞으로 개발자를 위한 기능정의서나, 디자인 문서를 더 상세하게 적을 수 있을 것 같다.

추가로 공부할 사항

• 컴포넌트 더 쪼개서 만들어보기
• JSX 문법 익숙해져보기
• Styled-Components 사용하기

  ---

1️⃣ HTML의 DOM 구조를 컴포넌트로 나누기 리액트는 컴포넌트 기반입니다. HTML 파일에서 구조를 분석하여 컴포넌트로 나눕니다.

✔️ 핵심 원칙

• 반복되는 UI 요소는 컴포넌트로 분리.
• 페이지의 주요 섹션을 컴포넌트로 나누기.
• 한 컴포넌트는 한 가지 역할만 하도록 설계.
  2️⃣ CSS 스타일 정리 및 적용

HTML의 <style> 태그나 외부 CSS 파일을 컴포넌트 스타일링에 맞게 정리합니다

✔️ 선택지

• CSS 파일 그대로 사용하기
• CSS 모듈 사용하기
• Styled-Components 사용하기
  

3️⃣ JavaScript 이벤트와 로직 변환

HTML의 onclick, onchange 등 이벤트 속성을 리액트 이벤트로 변환합니다.

✔️ 리액트 이벤트 핸들링

• 이벤트 함수는 camelCase 사용: onClick, onChange
• 핸들러 함수는 컴포넌트 안에서 선언:
• javascript
• 코드 복사
  

4️⃣ 상태 관리 (State) 적용 HTML에서 DOM 조작으로 처리되던 상태를 리액트의 useState를 사용해 관리합니다.

5️⃣ HTML 특수 속성 수정 리액트에서는 HTML 속성이 일부 변경됩니다.

✔️ 주요 변경 사항

• class → className
• for → htmlFor
• 인라인 스타일은 객체 형태로 작성
  

6️⃣ 정적 데이터와 동적 데이터 분리 HTML에 포함된 정적인 데이터를 리액트에서는 프로퍼티(props) 또는 **상태(state)**로 관리합니다.

7️⃣ 최적화: 재사용성과 유지 보수성 향상

• 컴포넌트 분리: 중복된 HTML 구조를 컴포넌트화하여 재사용.
• PropTypes 또는 TypeScript 적용: 컴포넌트의 데이터 타입 검증.
• 리팩토링: JSX 내 코드가 너무 복잡하면 로직을 함수로 분리.

[KwanLee1129]

느낀 점이 저랑 비슷해요 ㅋㅋㅋㅋ 꼼꼼한 정리 잘 보고 갑니당

[RunaUXLabs]

외않된데?를 외치기 보다, 코드를 보면서 협업의 자세(커뮤니케이션을 어떻게 해야는지, 내가 이해한 만큼 확장되는 화면과 개발의 관계)를 깨우친 그녀였습니다...👏👏 아주 좋습니다!