[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 Day 4

 

사전직무교육 Day4

 

온라인(Zep) 환경에서의 사전직무교육

 

오늘은 프로젝트 캠프 넷째날

하지만 새벽에 갑작스런 옆구리 통증과 오한으로 인해 응급실 행이 되었다..

부득이하게 오프라인으로도 온라인으로도 수업을 아예 참여하지 못하게 된 상황이다 😭

 

그래서 오늘은 수업 자료를 토대로 정리한 내용을 블로깅하려고 한다..

 

---

 

✅ React 컴포넌트

 

컴포넌트 Children

• children prop은 컴포넌트의 속성 중 하나로, 컴포넌트의 모든 자식 요소들을 포함
• 이를 통해 부모 컴포넌트는 자식 컴포넌트를 동적으로 렌더링 할 수 있음
• 기본적으로 존재해 있으며, 컴포넌트 간 구성 요소를 더 쉽게 재사용 할 때나 동적으로 컨텐츠를 전달할 때 유용함

컴포넌트 Props 타입

• Omit<React.ComponentPropsWithRef<"input">, "type">
  • Omit은 타입스크립트의 유틸리티 타입 중 하나
  • 특정 타입에서 하나 이상의 속성을 제외한 새로운 타입을 만들어줌
    • 예시에서는 "type" 속성을 제외한 input 속성들의 전부를 만들어 줌
• React.ComponentPropsWithRef<"input">
  • "input" HTML 요소의 모든 기본 props를 포함하는 타입을 가져옴
  • ComponentPropsWithRef 를 통해 "ref"라는 특별한 속성도 포함할 수 있도록 확장한 타입
  • "ref" 속성을 통해 컴포넌트나 DOM 요소에 직접 접근해야할 때 사용
• React.ComponentPropsWithoutRef<"button">
  • "button" HTML 요소의 모든 기본 props를 포함하는 타입을 가져옴
  • ComponentPropsWithoutRef 를 통해 "ref"라는 속성이 필요하지 않거나 사용되지 않는 컴포넌트일 경우 사용

 

컴포넌트 Hook

• useId()
  • 고유 id를 생성함
  • 매개변수를 받지 않음
  • 반복문이나 조건문에서는 사용 불가
  • 커스텀 훅이나 컴포넌트 최상위에서만 사용 가능
  • 데이터의 key 생성을 위해 사용하는 것은 불가

 

조건부 렌더링

• 특정 조건에 따라 컴포넌트나 요소를 렌더링
  • if문
  • 삼항 연산자
  • 논리 연산자(&&)
  • 즉시 실행 함수

 

반복 렌더링

• 특정 컴포넌트 요소를 반복적으로 출력하는 렌더링
• key 속성은 배열 항목의 고유성을 보장하기 위해 사용하므로 인덱스 번호로 사용하지 않도록 주의해야함 
  • 문자열 배열 렌더링
  • 객체 배열 렌더링
  • 컴포넌트 반복 렌더링

 

이미지 렌더링

• src 하위 폴더에 삽입
  • assets 폴더에 저장하면 공개적으로 노출이 안됨
  • 오직 리액트 시스템 내부에서만 이미지 활용이 가능함
  • import 구문으로 불러오면 빌드 프로세스 과정 중 자동으로 이미지가 최적화 되고, 배포 직전에 public 폴더에 삽입됨
  • 주로 컴포넌트 내에서 사용되는 이미지는 일반적으로 assets 폴더에 저장됨
  • src 하위 폴더(assets 등)에 이미지 파일을 삽입하고, import로 불러옴
    • <img /> 태그 src 속성에 넣기
    • css 파일에 background-image 요소로 넣기
• public 폴더에 삽입
  • public 폴더는 공용 폴더이기 때문에 상대 경로로 접근이 가능함
  • 나중에 서비스를 배포하더라도 도메인을 통한 경로로 접근이 가능함
    • ex) https://도메인/image.png
  • 빌드 프로세스에 의해 처리되지 않는 이미지는 public 폴더에 저장하는 것이 좋음
    • ex) 파비콘

 

📚 오늘의 과제

 

• 로그인 컴포넌트 만들기

1. 제공된 피그마 디자인에 따라 로그인 컴포넌트 만들기

import Input from './components/Input.tsx';
import CheckBox from './components/CheckBox.tsx';
import Button from './components/Button.tsx';

function App() {
  return (
    <div>
      <div>
        <section>
          <h2>
            Login Into App
          </h2>
          <p>
            Please enter your details to continue.
          </p>
          <form>
            <Input type="email" placeholder="someone@example.com" />
            <Input type="password" placeholder="Enter Password" />
            <CheckBox type="checkbox">
              <span>
                I agree with <strong>terms</strong> and{' '}
                <strong>policies.</strong>
              </span>
            </CheckBox>
            <Button>
              Log In
            </Button>
            <Button>
              Go To Sing up
            </Button>
          </form>
        </section>

        <section>
          <h2>
            Sign Into App
          </h2>
          <p>
            Please enter your details to continue.
          </p>
          <form>
            <Input type="text" placeholder="Enter Your Name" />
            <Input type="email" placeholder="someone@example.com" />
            <Input type="password" placeholder="Enter Password" />
            <CheckBox type="checkbox">
              <span>
                I agree with <strong>terms</strong> and{' '}
                <strong>policies.</strong>
              </span>
            </CheckBox>
            <Button>
              Sign In
            </Button>
            <Button>
              Go To Log In
            </Button>
          </form>
        </section>
      </div>
    </div>
  );
}

export default App;

 

Input, Button, CheckBox 컴포넌트는 강사님과 함께 수정된 코드여서 따로 공개는 하지 않았고, 각 컴포넌트 별 props로 전달되어야 할 속성들을 모두 전달했다.

피그마 디자인에 Login 컴포넌트와 Sign 컴포넌트가 나뉘어져 있는데, 나는 따로 나누지 않고 App 컴포넌트에 한번에 보여지도록 했다.

(추후에 Login 컴포넌트로 Sign 컴포넌트를 동적으로 업데이트하는 방식으로 리팩토링 될 예정..)

 

---

 

하루 빠진게 이렇게 타격이 클 줄이야...

새로운 Omit 타입이나 props 타입을 지정하는 방법을 수업 이후 강사님이 보내주신 코드를 보고 겨우 이해했다..

첫째도 건강, 둘째도 건강이 최고다.. 앞으로 건강관리에 더 유의해서 수업과 프로젝트 진행하는데에 지장이 없도록 해야겠다.

(입원치료하면서 온라인으로 수업을 들을 수 있으니 그나마 다행...)

 

내일도 화이팅이다..!!! 😭😭

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.