chez Manon

State ? 🔻 State란 : 컴포넌트 내부에서 가지고있는, 객체형태의 컴포넌트의 상태값이며 함수내에 선언된 변수처럼 컴포넌트 내에서 정의하고 사용하며 변경까지시킬 수 있는 객체. (state는 object이고 compo의 data를 넣을 공간이 있고, 이 데이터는 변함) - State가 필요한 이유 : 컴포넌트안의 요소에서 그 상태값반영해서 데이터가 바뀔때마다 효율적으로 화면(UI)에 나타내기 위해서 필요. - State와 Props의 차이 : 두객체 모두 렌더링 결과물에 영향을 주는 정보(컴포넌트의 속성값)를 가짐. props : (함수의 매개변수처럼) 부모로부터 props를 받고, 이 props는 상속받은 컴포넌트 내에서 수정 불가능(읽기전용) state : (함수내에 선언된 변수처럼) 컴포넌..

Rendering : 코드가 눈으로 볼 수 있도록 그려지는 것 ReactDom.render 함수 사용 > react요소가 DOM node에 추가되어 화면에 렌더됨 첫 번째 인자 JSX로 react요소 인자로 넘김 두 번째 인자는 해당 요소를 렌더하고 싶은 부모요소 전달 ReactDOM.render( Hello, world!, document.getElementById('root') ); React element : 리액트로 화면을 그려내는데 가장 기본적인 요소 JSX 문법으로 작성한 요소는 자바스크립트 객체가 됨 = 리엑트 엘리먼트 > ReactDOM.render 함수의 argument로 전달하게 되면, 리엑트가 객체 형태의 값을 해석해서 HTML형태로 브라우저에 띄움 React component : r..

JSX JavaScript eXtension javascript의 확장문법. javascript에서 html과 같은 문법을 사용. JSX ? React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 markup언어를 리터럴로 입력한는 것으로 보이는데, 빌드시 Babel에 의해 javascript로 변환된다. Hello World! //babel이 javascript로 변환 "use strict"; React.createElement("div", null, React.createElement("b", null,"Hello"), "World!"); ✔️ JSX에서는 하나의 root 레벨 요소가 있어야한다. ? 자바스크립트는 하나 이상을 return 할 수 없기때문에 JSX 규칙 (Babe..