잡식성 개발자

Conditional Rendering Condition 조건, 상태를 의미 Conditional Rendering 조건에 따른 렌더링 조건부 렌더링 어떠한 조건(조건문의 True, False)에 따라서 렌더링이 달라지는 것 function Greeting(props) { const isLogginedIn = props.isLoggedIn if (isLoggedIn) { return } return } Javascript의 Truthy와 Falsy Truthy : Javascript에서 True는 아니지만 True로 여겨지는 값 Falsy : Javascript에서 False는 아니지만 False로 여겨지는 값 // truthy true {} (empty object) [] (empty array) 42..

JSX의 정의와 역할 JSX의 정의 A syntax extension to Javascript 즉 자바스크립트의 확장 문법 자바스크립트 + XML/HTML 1 const element = Hello, world!; 역할 JSX는 내부적으로 XML 코드를 자스로 변환하는 과정을 거침 React.createElement( type, [props], [...children] ) JSX를 사용한 코드 class Hello extends React.Component { render() { return Hello {this.props.toWhat}; } } ReactDOM.render( , document.getElementById('root') ); JSX를 사용하지 않은 코드 // JSX를 사용한 코드 cons..

섹션 2. 리액트 시작하기 index.html 잡식성 개발자 블로그에 오신 여러분을 환영합니다. 잡식성 개발자 블로그에 오신 여러분을 환영합니다. {/* DOM Conatiner(Root DOM Node) */} MyButton.js // MyButton.js function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', { onclick: () => setIsClicked(true) }, isClicked ? 'Clicked!' : 'Click here!' ) } const domContainer = doc..