패스트캠퍼스 챌린지 24일차 - 리액트 빌드하기

0. 공부 인증 

공부 시작 23 : 36

공부 종료 23 : 54

 

오늘도 학과 과제......

모바일프로그래밍을 하다가 패캠으로 켰다.

여튼 이거 회사+학교+패캠 쉽지않다.

 

1. 빌드 환경 설정 변경하기

웹팩과 바벨의 환경설정을 커스텀하기 위해서는,

yarn eject 를 실행시켜야 함. (돌이킬 수가 없음 - package.json이 미친듯이 늘어남)

해당 명령어를 실행하면, 환경 설정을 직접하겠다는 뜻.

 

script, config 폴더가 생성되는데 사실상 그냥 해석하기 어려움....😂

- 일반적으로 수정할 필요는 없어 👍

 

바벨과 JSX, 웹팩을 잘 알고 있어야해...

 

2. 컴포넌트 만들고 가져오기

컴포넌트 파일을 활용하기 위한 일반적인 폴더 구조 src/components

 

컴포넌트의 이름은 항상 PascalCase를 사용해주어야 해!

-> 그러지 않으면 에러가 뜸.

 

Test.js 예시 컴포넌트

const Test = () => {
    return (
        <div>
            Hello World
        </div>
    )
}

export default Test

해당 컴포넌트를 다른 컴포넌트에서 불러올 수도 있음.

import React from 'react'
import Test from './components/Test'

const App = () => {
    return (
        <div>
            <Test />
        </div>
    )
}

export default App

 3. 컴포넌트의 상태 (state)

리액트 함수형 컴포넌트에서는 useState를 사용함.

상태관리 훅 중에 하나임.

 

useState는 하나의 컴포넌트에서만 접근하거나, props를 통해서만 내려줄 수있다는 단점이 있음

 

그래서 리덕스라고 하는 것을 사용하기도 함.

전역 상태 관리자인 리덕스는 다음 수업에서 다룸.

 

클릭이벤트 사용하기

HTML 엘레멘트에서 onClick 을 전달하면, 클릭이 되었을 경우 함수를 실행할 수 있음.

보통 화살표 함수로 전달함.

 

*화살표 함수 VS 일반 함수

-> this 가 가르키는 값이 바뀜.

 

state의 값이 변경될 경우 리렌더링이 진행됨.

이 부분이 장점도 있지만, 필요없이 리렌더링이 되는 경우가 있어서 추후에 새로운 훅을 배움

 

 

 

환급 챌린지 (24/30)

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지