본문 바로가기

분류 전체보기

 (388)
<리액트 기초> setTimeout 사용하기 * setTimeout - 이번 장에서는 리액트에서 setTimeout을 사용하는 방법에 대해서 다뤄보자. timeout; statTime; endTime; onClickScreen = () => { const { state } = this.state; if (state==='waiting') { this.setState({ state: 'ready', }); this.timeout = setTimeout( () => { this.setState( { state: 'now', }); this.startTime = new Date(); }, Math.floor(Math.random() * 1000) + 2000); // 2초~3초 랜덤 } else if (state === 'ready') { clearTi..
<메모리> 메모리와 포인터 1. 16진수 - 컴퓨터 과학에서는 숫자를 16진수로 표현하는 일이 많다. 그 이유는 16진수가 10진수에 비해 2진수를 훨씬 더 간단하게 나타낼 수 있어서 컴퓨터 친화적이기 때문이다. - 예를 들어, 11110000(2) 이라면 16진수는 4자리씩 끊어서 f0이라고 나타낸다. 즉 4비트씩 간단하게 나눠진다. - 주로 16진수를 나타낼 때에는 앞에 0x를 붙여서 0xf0과 같이 구분하여 나타낸다. - 16진수는 정보를 훨씬 더 짧게 표현할 수 있다는 장점도 있다. 2. 메모리 주소 * 메모리 주소 - 정수형 변수 n에 24라는 값을 저장하고 출력한다고 가정하자. - n은 int 자료형이므로 메모리 어딘가에서 4바이트 만큼 자리를 차지한다. - n은 메모리상에서의 주소값을 갖고 있다. 메모리 상에서의 주소..
<리액트 기초> 조건부 연산자 * 리액트에서의 조건문 - 리액트의 렌더링 부분에서 jsx문법을 사용할 때 조건문 if를 사용할 수 없다. - 정확하게 말하자면 억지로 if문을 사용하려고하면 매우 지저분 해진다. - 이는 앞서 봤었던 map에서도 마찬가지인데 for문 대신 map으로 반복문을 만들었었다. - 그렇다면 jsx에서 조건문을 어떻게 만드는 것이 좋을까? state의 result라는 배열에 값이 있을 경우에만 그 값을 이용한 태그를 만들고 싶다고 가정하자. renderAverage = () => { const { result } = this.state; return ( result.length === 0 ? null : 결과 : {result} ) }; render() { const { message } = this.state..
<자바스크립트> 배열 (1) 데큐, 추가, 삭제 메서드 - 이번 장에서는 배열에서 사용하는 다양한 메서드들을 알아보자. 1. 데큐 메서드 * 데큐 메서드 - 자바스크립트는 데큐 자료구조형의 메서드를 기본적으로 제공한다. - arr.push(...items) - 마지막 요소 추가 - arr.pop() - 마지막 요소 제거 - arr.shift() - 처음 요소 제거 - arr.unshift(...items) = 처음 요소 추가 2. 제거 메서드 * delete - 먼저 객체의 프로퍼티를 지우는 연산자 delete를 사용해보자. let arr = ["HARRY", "IU", "SUZY"] delete arr[1]; console.log(arr); // ["HARRY", empty, "SUZY"] - delete는 원하는 요소를 지울 수 있다. 그러나 key를 이..
<리액트 기초> Ref와 포커싱 1. class 컴포넌트에서의 ref와 포커싱 * 함수 만들기 - 기존에 포커싱을 줄 때 했었던 방식이다. 임의의 변수를 선언하고 그것을 함수에서 이용하여 포커스를 주는 방식이었다. 아래에서 다시 살펴보자. // ... // this.inputRef.focus(); inputRef; onRefInput = (c) => { this.inputRef = c }; render() { ... } - 임의로 만든 함수는 렌더링되는 포커싱이 필요한 태그에 ref에 넣어주고, 이를 불러올 때에는 this.inputRef.focus()와 같이 불러온다. * createRef 사용하기 - 아래에서 다뤄보겠지만 hooks에서는 useRef를 이용한다. 이는 위 보다 덜 복잡하지만 current가 위에서 추가된다. crea..
<리액트 기초> 렌더링 최적화 * 리액트 개발자 도구 - 리액트로 개발을 한다면 React Developer Tools는 필수이다. 컴포넌트와 props를 바로바로 확인할 수 있고, 디버깅을 더 편하게 해준다. - 크롬 웹 스토어에서 react를 검색한 후 개발자 도구를 설치하자. - 설치가 완료되면 리액트가 사용된 사이트에서 개발자 도구(f12)를 열어서 리액트와 관련된 도구들을 사용할 수 있다. - 리액트 개발자 도구는 렌더가 되는 것을 실시간으로 확인을 하게 해준다. 이 기능은 톱니바퀴 버튼에서 Highlight update를 체크하면 된다. - 이를 보기위해서 state에서 counter를 0으로 두고 온 클릭 함수에 setState({}) 를 입력해서 아무 일도 일어 나지 않도록 했다. 그 후 버튼을 클릭하면 다음과 같이 화..
<자바스크립트> 숫자형 자료 이번 장에서는 자바스크립트에서 다루는 일반적인 숫자형 자료에 대해서 공부해보자. * toString - toString 메서드는 숫자를 원하는 진법으로 변환한다. let num = 21; console.log(num.toString(16)); // 15 console.log(num.toString(2)); // 10101 console.log(21..toString(36)); // 1 - 위는 21이라는 숫자를 각 16진법과 2진법으로 나타낸 것이다. - 숫자에 직접 toString을 사용하려면 소수부로 인식되지않도록 두 개의 점을 사용해야한다. * 수학 함수 - 자바스크립트 내장 객체인 Math에는 유용한 수학관련 함수들이 많다. 그 중 먼저 어림수를 구하는 함수들을 알아보자. - Math.floor ..
<리액트 기초> map과 props 1. map * 1차원 배열 - map은 리액트에서 반복문을 쓸 때 아주 좋은 방법이다. - 사용법은 배열을 미리 만들고 map메서드를 불러오면 된다. {['가','나','다','라','마'].map( () => { return ( hi ); })} - map은 배열안의 원소들을 하나하나 돌아가면서 return결과로 바꾸는 방식이다. 여기서는 문자를 jsx태그로 바꾸고 있는 것이다. 입력과 출력의 갯수가 같음에 유의하자. 결과는 아래와 같을 것이다. hi hi hi hi hi - map 안에서 첫 번째 인자를 이용하면 배열안의 원소들을 받아오는 반복문이 가능하다. {['가','나','다','라','마'].map( (v) => { return ( {v} ); })} - map안에 첫 번째 인자 v를 넣어주..
<리액트 기초> import vs require * require - 우리는 지금까지 require로 모듈을 불러 왔다. const React = require('react'); const { Component } = React; - require은 노드의 모듈 시스템으로 module.export로 내보낸 것을 다른 곳에서 불러와서 쓰게 한다. - 구조분해 방식으로 작성한 부분은 exports되는 대상이 객체나 배열형태이면 사용 가능하다. * import import React, { Component } from 'react'; - import로 쓰게 되면 위처럼 한 줄로 깔끔하게 작성이 가능하다. - from뒤에는 파일의 경로를 작성할 수 있다. - import는 export default 로 내보낸 것을 불러올 수 있다. - 구조분해 방식으로 내보..
<리액트 기초> 코드 개선하기 * class의 constructor - hooks를 사용할 때를 제외하고 class방식에서 컴포넌트에 기본적으로 다음과 같이 작성하였다. const React = require('react'); const { Component } = React; class Practice extends Component { constructor(props) { super(props); this.state = { first: '', second: '', }; } render() { return ( 첫 번째 값 : {this.state.first} 두 번째 값 : {this.state.second} ); } } - 위에서 실제로는 constructor를 작성하지 않고 컴포넌트를 만들어도 상관없다. 이를 개선하면 다음과 같..

티스토리툴바