잡식성 개발자

List와 Key List 목록 Array (배열) : 자바스크립트의 변수나 객체들을 하나의 변수로 묶어 놓은 것. Key 각 객체나 아이템을 구분할 수 있는 고유한 값 아이템들을 구분하기 위한 고유한 문자열 여러개의 Component 렌더링 하기 map() 짝 지어주는 것 ReactDOM.render( {1} {2} {3} {4} {5} document.getElementById('root') ) const numbers = [1, 2, 3, 4, 5] const listItems = numbers.map((number) => {number} ) ReactDOM.render( {listItems}, document.getElementById('root') ) const doubled = numbers...

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

Event의 정의 및 Event 다루기 Event 특정 사건 예시 : 사용자가 버튼을 클릭한 사건 바인딩 사용하기 class Toggle extends React.Component { constructor(props) { super(props); this.state = { isToggleOn: True }; // callback에서 `this`를 사용하기 위해서는 바인딩을 필수적으로 해줘야 합니다. this.handleClick = this.handleClick.bind(this); } // 바인딩 사용 handleClick() { this. setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {this..

Hooks의 개념과 useState, useEffect Hook 갈고리 이름 앞에 use를 붙어야 함 useState state를 사용하기 위한 Hook import React, { useState } from "react"; function Counter(props) { var count = 0; return ( 총 {count}번 클릭했습니다. count++}> 클릭 ); } useState() 사용법 const [변수명, set함수명] = useState(초기값); import React, { useState } from "react"; function Counter(props) { const [count, setCount] = useState(0); // setCount : 변수 각각에 대해 se..

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

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

1. HTML과 CSS HTML 정의 : 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 태그 태그를 사용해 구조를 형성하고 내용을 채움(ex. 태그는 열었으면 꼭 닫아줘야 함. 웹사이트의 뼈대를 구성하는 태그들 head : 웹사이트의 설명 등을 담고 있음. 메타데이터 body : 실제로 웹사이트에서 보이는 컨텐츠가 들어감 SPA(Single Page Application) 하나의 페이지만 존재하는 웹 사이트 또는 웹 애플리케이션 CSS(Cascading Style Sheets) 웹사이트의 레이아웃과 글꼴 등 디자인을 입히는 것. 2. JavaScript 소개 및 자료형 Javascript = ECMAScript html은 웹사이트의 뼈대, 자바스크립트는 웹사이트에 생명을 불어넣어 주는 역할 스크립..