React02 :: 기본 문법

ㅡ. 시작

ㅡ. 초기렌더링

render()

컴포넌트가 어떻게 생겼는지 정의하는 역할을 수행, 객체를 반환 

 

ㅡ. Virtual DOM

DOM = Document Object Model 약자. 객체로 문서 구조를 표현하는 방법, 트리형태 구성

DOM에 변화가 생기면 웹 브라우저에서는 CSS 연산, 레이아웃 구성 및 페이지 렌더링 수행 (시간이 소요)

 

Virtual DOM은 DOM에 접근하여 조작하지만, 추상화 자바스크립트 객체 구성하여 사용합니다. 

 

ㅡ. 작업 환경 설정

1. Node.js / npm 

2. vscode

3. Git

4. create-react-app 프로젝트 생성

 

ㅡ.create-react-app 으로 프로젝트 생성

 

시작

react가 나타납니다.

 

ㅡ. JSX

번들러 도구 = 묶는다.

주로 웹팩이 그 기능을 수행하는데, import 모듈들을 불러왔을 때 모두 합쳐서 하나의 파일을 생성해주는 역할을 수행합니다.

웹팩의 로더를 사용해서 SVG나 CSS파일을 불러와 사용할 수 있습니다. 

 

I. 함수형 컴포넌트

function 키워드를 이용해 컴포넌트 생성 

ref : https://github.com/asleepysamurai/example-react-class-to-function-component/blob/master/src/TodoInput.js

 

HTML 처럼 작성한것처럼 보이지만, 이 코드는 JSX 라고 합니다. 브라우저 실행되기전에 코드가 번들링 되어 바벨 이용해 js코드로 변환됩니다.

이 역할을 수행하는것이 React에서 

return React.createElement("div", ...);

 

ㅡ. JSX 장점

1. 보기 쉽다.

2. 높은 활용도

 

ㅡ. JSX문법

리액트 컴포넌트에서 여러개 요소들을 하나로 감싸줘야 합니다. e.g) <div> ... ... </div> or <Fragment> </Fragment> (=<> </>)

Virtual DOM에서 컴포넌트 변화를 감지하는것을 효율적으로 비교하기 위해서 입니다. 

 

자바스크립트 표현식을 작성하고 싶다면 { } 사용하면 됩니다. 

브라우저 상에서 나오게됩니다.

ㅡ. 조건부연산자

조건부 연산자를 통해서 화면에 렌더링 할 수 있습니다.

 

ㅡ. undefined를 렌더링하지 않기

 

 

ㅡ. 인라인 스타일링

DOM에 스타일 적용시에는 객체 형태로 넣어야 합니다. 또, background-color 같은에는 - 를 포함하고 있는데 카멜표기법으로 작성합니다. 

e.g) background-color = backgroundColor 로 작성합니다.

style 객체를 미리 선언하지 않는 경우 <div style={여기에 작성해주세요}>

 

ㅡ. class대신 className 

return <div className="react">{name}</div> (o)

return <div class="react">{name}</div>(x - 브라우저 warming, react v16부터 적용)

 

 

ㅡ. 주석

{/* 주석 작성 */}

 

ㅡ. ESLint와 Prettier 적용하기 (나중에)

 

ㅡ. 컴포넌트

 

 

export , import 문을 적절하게 사용하므로써 컴포넌트를 불러와 렌더링할 수 있습니다.

 

ㅡ. props

props = properties 

컴포넌트에 name이란 속성으로 hoho를 전달해주면

해당 컴포넌트에서는 props.name 값을 불러올 수 있습니다.

 

ㅡ. props 기본값 설정: defaultProps

 

defaultProps 를 지정할 수 있습니다. 

혹은 

이렇게 쓰게될 경우 MyComponent 에서는 {props.children} 으로 바바봉을 화면에 렌더링 시킬 수 있습니다.

 

ㅡ. isRequired를 사용하여 필수 propTypes 설정

 

App.js에서 props로 넘겨줄 인자값들을 지정하고 

import 로 PropTypes를 불러와서 name, favoriteNumber 값을 지정합니다.

ㅡ. state

컴포넌트 내부에서 바뀔 수 있는 값들을 의미합니다. 두가지 종류가 있습니다. 클래스형 컴포넌트 state, 함수형 컴포넌트 useState

가 있습니다.

버튼에 눌려지는 횟수에 따라 값이 증가됩니다.

this.setState를 사용하면 state 값을 업데이트할 때 상태가 비동기적으로 업데이트 됩니다.

이를 처리하기 위해서 다음과 같이 작성

혹은 setState이후에 어떠한 작업을 처리하고 싶다면

두번쨰 인자에 값을 넣으면 됩니다.

ㅡ. useState

배열 비구조화 할당 = 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법입니다.

주의점 : state 값을 바꿀때마다 setState or useState를 통해 전달받은 세터 함수를 사용하는것 입니다. 따라서, 객체를 업데이트할때는 
{ ... object, b : 2 } 와 같이 사본을 만들어서 업데이트 합니다. 

 

ㅡ. 이벤트 핸들링

사용자가 웹 브라우저에서 DOM요소들과 상호 작용하는것을 이벤트 라고 합니다. 

이벤트를 작성할때는 다음의 주의사항이 있습니다. 

1. 카멜케이스 작성

2. 함수 형태의 값을 전달합니다.

3. DOM 요소에만 이벤트를 설정할 수 있습니다. 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없습니다.

e.target.value 값을 확인할 수 있습니다.

constructor 에서 state 초깃값을 설정하고 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출하여 state를 업데이트 합니다. 

이벤트에 실행할 자바스크립트 코드를 전달하는것이 아니라, 함수 형태의 값을 전달하는 방법에 대해 살펴보겠습니다.

임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해서 메서드를 this와 바인딩하는 작업이 필요해집니다. 바인딩하지 않으면 undefined 를 가리키게 됩니다.

다음은 4.2.3.2 Property Initializer Syntax 사용한 메소드 작성(258)