잡식성 개발자

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..

섹션 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..

섹션 1. 리액트 소개 리액트는 무엇인가? 라이브러리 자주 사용되는 기능들을 정리해 모아 놓은 것 리액트는 자바스크립트 UI 라이브러리 프레임워크 vs 라이브러리 프레임워크 프로그램의 흐름의 제한을 개발자가 아닌 프레임워크가 가지고 있음. 라이브러리는 프로그램의 흐름을 개발자가 제어함. 리액트의 장점과 단점 리액트의 장점 빠른 업데이트와 렌더링 속도 Virtual DOM(Document Object Model) Component-Based 레고 블록 조립하듯 컴포넌트들을 모아서 개발 아래는 Air BnB 사이트 재사용성 계속해서 사용이 가능한 성질 - 모듈의 의존성을 낮추고 호환성을 높임. ⇒ 재사용성을 높임 - 효과 - 개발 기간 단축 - 유지 보수 용이 - Meta라는 든든한 지원군 - 커뮤니티의 활..