createElement 를 이용해 엘리먼트를 정의하면 복잡하기도 하고 가독성도 좋지 않다.그래서 리액트 팀은 Element 를 정의하는 간편한 방법으로 jsx 문법을 제공한다.자바스크립트를 확장한 문법으로 ReactElement 를 xml 문법으로 정의할 수 있는 문
리액트 엘리먼트는 불변 객체이다.엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.따라서 엘리먼트를 업데이트 하기 위해서는 완전히 새로운 엘리먼트를 만들고 ReactDOM.render 로 다시 렌더링 하는 방식을 사용한다.
ES6 에서 제공되는 클래스 문법을 이용하여 렌더링 될 컴포넌트를정의하는 방법을 제공한다.render() 함수는 반드시 작성되어야 하며, 반환값으로는 렌더링 될리액트 엘리먼트를 정의한다.. - 일반적으로 jsx 사용컴포넌트를 정의하는 방법은 현재 두 가지 방식을 제공한
properties 의 약어로, 컴포넌트 속성을 설정할 때 사용하는 요소이다.props 는 읽기 전용 객체이기 때문에 수정해서는 안된다.리액트는 매우 유연하게 사용하지만 한 가지 엄격한 규칙이 있다.모든 react 컴포넌트는 자신의 props 를 다룰 때 순수 함수처럼
state 는 컴포넌트 내부에서 바꿀 수 있는 값을 의미한다.props 는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하고 주는읽기 전용 값이지만, state 는 컴포넌트 내부에서 설정되는 값이다.우리는 state 의 변경되는 값을 관리하며 다양한 작업을 진행할
Hooks 는 리액트에 새로 도입된 기능으로, 함수 컴포넌트에서 사용 불가능한생명주기 메소드의 한계점으로 인해 상태 관리 및 렌더링 이후 시점 컨트롤 등 다양한 문제를 해결하기 위해 만든 함수 집합을 의미한다..그 중 useState는 가장 기본적인 hook 이며, 함
동기 작업 : 하나의 작업을 실행하고 마친 후에 작업을 순차적으로 실행비동기 작업 : 메인 흐름은 멈추지 않은 상태에서 특정 작업들을백그라운드에서 처리하며 동시에 처리하는 것 처럼 실행setTimeout은 비동기 함수로주어진 시간 후에 특정 코드를 실행하도록 예약하지만
자바스크립트를 사용하면 필요할 때서버에 네트워크 요청을 보내고 새로운 정보를 받아올 수 있다..과거에는 ajax 를 이용해 페이지 새로고침 없이 (비동기)서버에 데이터를 가져올 수 있었다..fetch 는 ajax 의 단점을 개선하고 좀더 현대적인 방식으로네트워크 요청을