JSX 문법 및 HTML 과의 차이
JSX는 JavaScript를 확장한 문법으로, 코드 내에서 UI관련 작업을 할 수 있다.
일반 HTMl태그 사용을 할 수 있으므로 가독성이 뛰어나다.
HTML과의 차이는
- 형제노드를 사용할 수 없다.
- 꼭 하나의 태그 사이에 태그들이 묶여있어야한다.- 카멜표기법을 작성한다.
- Javascript표현식을 사용하기 위해서 {} 내부에서 사용해야한다.
- 주석 방법이 조금 다르다
클래스 vs 함수 컴포넌트
- 클래스 컴포넌트
클래스 컴포넌트에서는 render()메서드가 꼭 있어야한다.
render() 메서드에서 렌더링하고싶은 JSX를 반환시키면 된다.
props나 state를 조회시 this.props나 this.state인 오브젝트 형태로 조회해야한다.
데이터가 변경되면 리액트가 render()함수를 호출해서 UI가 업데이트 되는 방식이다.
- 함수형 컴포넌트
함수를 기반으로 만든 컴포넌트로,
컴포넌트 자체에 데이터가 없는 경우나, 외부에서 전달받은 데이터만 보여주면 되거나, state, props 둘다 없는 아주 정적인 컴포넌트 같은 경우 굳이 클래스를 정의하지 않고 더 짧은 코드를 얻을 수 있다.
State
컴포넌트 내부에서 변경될 수 있는 값(데이터)
직접 변경이 되지 않는 이유는?
setState가 비동기적으로 작동하기 때문에, state가 직접 수정되어 여러번 바뀌게 되면 이전의 업데이트 내용이 다음 업데이트 내용으로 덮여질 수 있는 문제가 있다.
Props
properties의 약자로 컴포넌트 속성을 설정할 때 사용하는 요소
부모 컴포넌트에서 자식 컴포넌트에게 요소를 전달할 때 사용한다.
