JSX
- JSX 표현식
자바스크립트의 확장 문법. 가독성을 높여주고 복잡도를 낮춰준다.
- JSX 규칙
-> 반드시 하나의 엘리먼트로 모든 엘리먼트를 감싸야한다.
-> 자바스크립트 코드를 적용할땐 { } 안에 작성한다.
-> if문이 사용 불가, 삼항연산자나 IIFE를 사용해야한다.
-> 엘리먼트의 클래스 이름을 적용할 때, className을 사용한다.
JSX 속성
속성에 따옴표를 이용해 문자열 리터럴을 정의.
const element = <div tabIndex="0"></div>;중괄호를 사용하여 표현식을 삽입
const element = <img src={user.avatarUrl}></img>;자식 정의
태그가 비어있다면 XML처럼 />를 이용해 바로 닫아주어야 한다.
const element = <img src={user.avatarUrl} />;JSX 태그는 자식을 포함할 수 있다.
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);JSX 주입공격 방지
JSX에 사용자 입력을 삽입하는것은 안전하다. 모든 항목은 렌더링 되기전에 문자열로 변환된다.
const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;객체를 표현
Babel은 JSX를 React.createElement() 호출로 컴파일한다.
다음 두예시는 동일
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);React
-
프론트엔드 라이브러리, UI를 만들 수 있는 자바스크립트 Interface
-
관리해야할 dom이 많아질수록 관리가 힘들어서 고안해낸 방법, User Interface를 편하게 만들 수 있다.
-
react 는 component 베이스
-
component :
- 하나의 의미를 가진 독립적인 단위 모듈, 나만의 html 태그.
- props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
- tag들의 조합, 태그의 이름이 지정 가능하다 (가독성이 높고 직관적)
React data flow
단방향 데이터 흐름 : 부모 component에서 자식 component로 데이트 흐름.
props
: 부모 component에서 자식 component로 넘겨주는 데이터를 props라고 지칭.
- 읽기전용이다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.
function Parent() { // 상위 컴포넌트
return( <Child name = "walli"/>)
}
function Child(props) { // 하위 컴포넌트
return( <h1> hellow {props.name}</h1>)
}state
: 컴포넌트가 갖는 상태. 객체의 형태로 컴포넌트 내에서 보관하고 관리한다.
-
React 컴포넌트는 state를 통해 규칙을 위반하지 않고 사용자 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경할 수 있다.
-
state를 사용하기 위한 조건은 항상 class를 이용한 Component를 생성해야한다.
-
값을 변경할 땐 반드시 setState 메서드를 사용해야 한다.
-
state 값이 변경되면 render()함수가 실행 된다. 클래스에서는 랜더함수가 무조건 필요
-
state 업데이트는 비동기적일 수도 있다. this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안 된다.
-
state 업데이트는 병합된다. setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합한다.
class Person extends Component {
state = {
power : 50,
isHungry : false
}
changeState() {
this.setState({
power: 100
})
}
render() {
return(
...JSX code...
)
}
}Life Cycle
: 컴포넌트가 브라우저에 생성, 업데이트, 삭제 될때 각 단계 전후로 특정 메소드가 호출 된다.
-
Rendering 순서
Constructor > ComponentWillMount > Render > CoumponenDidMount -
값이 변경될때 method
shouldComponentUpdate, [new]static getDerivedStateFromProps, [new]getSnapshotBeforeUpdate, componenDidUpdate -
컴포넌트 제거 시 method
componentWillUnmount
개념 질문 ?
-
React 와 같은 Component 기반 라이브러리를 왜 사용하는가 ?
->javascript로 규모가 크고 빠른 웹앱 어플을 만드는 가장 좋은 방법
관리해야할 Dom이 많아질수록 관리가 힘들어 react가 필요 -
왜 state가 존재하고 어떻게 업데이트 해야하는가?
->React component가 규칙을 위반하지 않고 출력값을 변경가능, setState메서드를 사용 -
stateless functional components와 class components 차이점은 무엇인가?
->functional은 자바스크립트 함수, class components는 state를 넣을 수 있다. 더 많은 feature 제공
- bable 및 webpack의 목적과 필요성은 무엇인가 ?
-> 웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음, 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)다.
Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다.
Virtual DOM
-
React에서는 실제 DOM에 렌더하기 전에 virtual DOM(자동화, 추상화)에 먼저 렌더링한다.
이후 virtual DOM과 실제 DOM을 비교해 필요한 변경 사항만 렌더해준다. -
이는 불필요한 연산자를 걸러내고 필요한 변경 사항만 실제 DOM에 적용함으로써,
연산의 양을 줄이고 성능 개선에 도움을 줄 수 있다.
