React
-
React - Props & StateReact/Basic 2021. 6. 3. 22:32
Props : 컴포넌트 외부에서 컴포넌트에게 주는 데이터 State : 컴포넌트 내부에서 변경할 수 있는 데이터 둘 다 변경이 발생하면 re-render 발생할 수 있음 현재는 React Hook으로 인해 class Component에서의 State 방식을 사용하지 않음 // Props 예제 function Component(props) { return ( {props.message} ); } // Default Props Component.defaultProps = { message: 'Default Props', }; ReactDOM.render( , document.querySelector('#root') ); // State 예제 class Component extends React.Compone..
-
React - JSXReact/Basic 2021. 6. 3. 22:07
JSX 문법은 Babel compiler를 통해 순수한 JavaScript로 컴파일 되어 사용 가능 // JSX hello // Babel Compiler React.createElement("h1", null, "hello"); JSX 사용 이유 가독성 babel 과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움 JSX 문법 최상위 요소는 하나여야 함 자식들을 바로 렌더링 하고 싶으면, 사용 ( Fragment ) 자바스크립트 표현식을 사용하려면, {표현식} if문은 사용 불가 삼항 연산자 또는 && 사용 style을 이용해 인라인 스타일링 가능 class 대신 className을 사용 자식요소 태그는 꼭 닫아야 함
-
React - ComponentReact/Component 2021. 5. 31. 21:29
Class Component // 정의 class ClassComponent extends React.Component { render() { return Hello React; } } // 사용 ReactDOM.render(, document.querySelector('#root')); Function Component // 정의 1 function FunctionComponent() { return Hello React; } // 정의 2 const FunctionComponent = () => Hello React; // 사용 ReactDOM.render(, document.querySelector('#root')); React.createElement // 정의 React.createElement..
-
React - 개발환경 셋팅React/Settings 2021. 5. 30. 20:30
nodejs 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org NVM 설치(Node Version Manager) https://github.com/coreybutler/nvm-windows coreybutler/nvm-windows A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows github.com Chrome 설치 https://www.google.co.kr/chrome/?brand=CHBD&gclsrc=aw...