React 기초 개념

How to view?

src의 js파일들을 public의 index.html에 끼워서 출력

React는 최종으로 단 하나의 컴포넌트를 그림

 

컴포넌트의 이름은 대문자로 시작

여러 컴포넌트를 제작하기 위해선 map()을 이용

 

map() = 배열의 모든 원소마다 특정작업 함수를 적용하고, 그 결과를 반환

단, 출력값 != 반환값

 

 

JSX = JS와 html을 조합한 문법

 

props= 컴포넌트 간 전달하는 데이터 (재사용성)
문자열 외 데이터는 '{값}' 형식으로 전달
동적 데이터 전달X

state= 클래스형 컴포넌트에서 사용가능
동적 데이터 전달O

 

함수형 컴포넌트	클래스형 컴포넌트 class App extends React.Component { render() }
return문이 JSX 반환	render()함수가 JSX 반환

 

 

생명주기 함수 = 클래스형 컴포넌트의 일생을 만들어줌
constructor()

render()    [로딩]

componentWillMount()    [로딩 중]

componentDidMount()    [로딩 후] [처음 화면에 그려져 실행]

componentDidUpdate()    [화면 업데이트시 실행]

componentWillUnmount()    [컴포넌트가 화면을 떠나거나 제거시 실행]

 

 

라우터 = 화면 이동을 시켜주는 장치 (react-router-dom)

 

route props = 라우팅 대상이 되는 컴포넌트에 기본으로 넘어가는 props

Link 태그의 to 속성값 수정을 통해 전달

 

리다이렉트 기능 = 강제로 다른 페이지 URL로 변경하는 것

route props의 history키(push, go, goBack 등)과 같이 URL 변경함수 활용

 

GitHub URL

레포지터리 URL

: github.com/[GitHub 사용자명]/[프로젝트 명].git

배포 URL

: https://[GitHub 사용자명]/[프로젝트 명]