React공식문서 공부

JSX : JavaScript XML의 약자로, React에서 사용하는 JavaScript 확장 언어이다.React에서는 JSX가 필수는 아니지만 시각적으로 더 좋고, React가 경고나 에러메시지를 표시할수 있게 해준다.시각적으로 더 좋다면 무엇보다?JSX가 나오기

저번 시간에 JSX에 대해서 공부했다.복습하자면 JSX는 React.CreateElement()와 같은 놈이고 React.CreateElement()는 React 엘리먼트라는 객체를 리턴한다.그래서 리액트에서는 JSX를 객체로 인식한다.그리고 React는 엘리먼트를보고

개념적으로 컴포넌트는 JavaScript 함수와 유사하다.!! 같다는 말은 아니다. 유사하다.JavaScript 함수는 인자를 받고 해당 인자로 무언갈 한다.컴포넌트는 "props"라고 하는 입력을 받고 화면에 어떻게 표시될지 정의된 객체인 React 엘리먼트를 반환

지금까진 엘리먼트(화면에 어떻게 표시할지 기술된 일반 객체)를 통해 DOM을 구성하기 위해서는 루트 돔 노드(<div id='root'></div>)에 엘리먼트를 넣어서, 좀더 자세히는 ReactDOM.render()함수의 인자로 엘리먼트와 루트 돔 노드를

지난시간엔 State를 사용해 ReactDOM.render()함수를 여러번 호출하지 않아도 컴포넌트 자체에서 setState를 이용해 새롭게 DOM 구성 -> 최신 UI로 업데이트 즉, 렌더링을 시켰다.그 과정에서 생명주기함수도 사용해보았고 state사용할때 주의할점,

React에서 사용하는 JSX를 배웠고 이는 객체를 생성한다고 배웠다. 그 객체는 바로 리액트의 가장 작은 단위인 React 엘리먼트이고 이는 말한것처럼 일반 객체이다.이객체는 화면을 어떻게 구성해야할지 실제 DOM을 어떻게 구성해야할지 정의된 객체 즉, 설명서 이다.

우리는 컴포넌트가 React Element를 리턴하여 결국 ReactDOM.render() 함수에 해당 React Element를 넣던가 해당 엘리먼트를 리턴하는 컴포넌트를 넣어서 DOM을 구성할수 있다 배웠다. (state를 이용해서 컴포넌트 내에서 자체적으로 리 랜

HTML의 form 엘리먼트(React 엘리먼트와 다르다..)는 자체가 내부 상태를 가지기 때문에, 다른 Dom 엘리먼트들과 다르게 동작한다.예를들면위 HTML의 form엘리먼트는 input에 들어가는 value를 name에 넣어서 다른 페이지로 이동하는 기본적인 동작

React를 사용해서 프로젝트를 진행하다보면 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 때가 종종 있다. 이럴때는 글 제목 처럼, 이번 주제처럼 가장 가까운 공통 조상 컴포넌트로 state를 끌어올리는 것이 좋다.이번에는 공식문서의 예제와 완전 동일한

합성과 상속 결론부터 말하면 React에서는 강력한 합성모델을 가지고 있으며 상속으로 코드를 재사용하기 보단 합성을 이용해서 컴포넌트간에 코드를 재사용하는것이 좋다. (합성이란 컴포넌트 합성 컴포넌트편에서 컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할수 있다로 배웠

React의 장점중 하나가 앱을 설계하는 방식이다.지금까지 배운 내용을 토대로 앱을 설계해보자.이 JSON데이터를 외부로 부터 받아서 사용자에게 보여주는 앱을 설계해보자.이 앱은 사용자가 검색할수도 있다.일단 박스모델을 만드는것이 첫번째이다.모든 컴포넌트(혹은 그 하위