jineecode

EventPractice.js import React, { Component } from "react"; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e); }} > ); } } export default EventPractice; console.log >> onChange event input에 입력 시, SyntheticBaseEvent 가 나타난다. import React, { Component } from "react"; class EventPractice extends Component { render() { return ( 이벤트 연습 { console.log(e.target); }} > ); ..

src/Counter.js import React, { Component } from "react"; class Counter extends Component { constructor(props) { super(props); this.state = { //state의 초깃값 설정하기 number: 0; } } render() { const { number } = this.state; return ( {number} { this.setState({ number: number + 1 }); }} > +1 ); } } export default Counter; class Counter extends Component { constructor(props) { super(props); this.state = { ..

1. props 기본값 설정 App.js import React, { Component } from "react"; import "./App.css"; import MyComponent from "./MyComponent"; const App = () => { return ( ); }; export default App; App은 부모 컴포넌트, 는 자식 컴포넌트라고 한다. App이 갖고 있는 state 데이터를 자식 컴포넌트에게 props를 이용해 전송해줄 수 있다. 그래야만 자식 컴포넌트가 부모 컴포넌트가 가진 state를 쓸 수 있다. props를 쓰는 방법은 아래와 같다. 1. 부모 안에 있는 자식 컴포넌트 태그에 속성을 만들어준다. 2. 바깥에 있는 자식컴포넌트에 props 파라미터 사용 fun..

1. Q. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸 주어야 할까요? A. Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문 div로 꼭 감싸고 싶지 않을 때는 리액트v16 이상부터 도입된 혹은 으로 감싸면 된다. 2. JSX 내부의 자바스크립트 표현식에서는 if 문을 사용할 수 없다. JSX 밖에서 if문을 사용하거나 {} 안에 삼항연산자를 사용하면 된다. 혹은 &&연산자를 사용한다. (false를 렌더링 할 때는 아무것도 나타나지 않기 때문) 3. Q. 클래스형 컴포넌트와 함수형의 컴포넌트의 차이 A. 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 ..

async, await은 비동기를 다루지만, 프로미스와는 다른 사용법을 가지고 있고 프로미스를 이용한다. function myFunc() { } async function myAsync() { } console.log(myFunc); console.log(myAsync); 모양이 특이한 것을 볼 수 있다. 호출을 해보자. function myFunc() { return 'func'; } async function myAsync() { return 'async'; } console.log(myFunc()); console.log(myAsync()); promise가 나온다. function delayP(sec) { return new Promise((resolve, reject) => { setTimeou..

function delay(sec, callback) { setTimeout(() => { callback(new Date().toISOString()); }, sec * 1000); } console.log('start', new Date().toISOString()); delay(1, (result) => { console.log(1, result); }); console.log('hello'); function delay(sec, callback) delay라는 함수에 sec, callback 이라는 파라미터를 넣어줌. 그 안에 callback과 sec이 써여진 것을 볼 수 있다. (이는 정해진 메소드가 아니라 우리가 정한 것. 꼭 delay나 sec, callback이 아니어도 작동한다.) 콘솔의..

자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트를 싱글 스레드 언어라고 부른다. function yo() { setTimeout(function () { console.log('1.5초 타이머 끝!') }, 1500); for (let i = 0; i < 3; i++){ doSomething(); //가정 : 매번 1초가 걸리는 일 console.log(i); } console.log('3초 걸리는 for 문 끝'); } yo(); console.log('main 끝!'); Q. yo()를 실행할 경우, 몇 초 뒤에 '1.5초 타이머 끝!'이 실행될까? A. 약 3초 후에 실행됨 이유: JS는 싱글스레드이기 때문이며, JS의 큐에서 하나씩 꺼내고 콜 스택이 하나가 있는데 그..

코드를 보며 이해 먼저 하기 들어가기 전에... 자바스크립트 ES6부터는 const와 let을 이용해 블록 레벨 스코프도 지원하기 시작했습니다. 따라서 if 문 안에 var 대신 const나 let으로 변수를 선언하면, 다른 언어들처럼 참조하지 못합니다. const와 let은 블록 레벨 스코프, var와 같은 전통적인 자바스크립트의 변수는 함수 레벨 스코프라는 사실을 꼭 기억해두세요. ES5 function outer() { var a = 1; console.log(a); } outer(); // 1 outer a 1 a에 무슨 값이 들어있는지 찾는 '곳'이 스코프. 함수단위로 스코프가 생성된다. function outer() { var a = 1; function inner() { var a = 2; ..