Programming310 [React] Hooks - useState Hooks에서 처음으로 다뤄볼 기능은 useState였습니다. 예전에 살짝 어떤 느낌이다만, 소개했고 이번엔 그 본격적인 사용 방법을 다루려고 합니다. 1. useState useState는 함수형 컴포넌트 내부에서 state 값을 관리(변경 등)을 하기 위해 사용하는 Hook입니다. 그러면 실제 사용을 통해 useState를 알아보겠습니다. 다음은 버튼에 따라 글자와 문자가 변하는 간단한 컴포넌트입니다. import React, {Fragment, useState} from 'react'; const ColorChanger = () => { const [colorText, setColorText] = useState('검정'); const [color, setColor] = useState('black.. 2021. 11. 15. 자바스크립트의 this 예전에 this를 간단히만 다뤘습니다. 그때는 포스트 성격상 this가 클래스, 프로토타입 개념부터 이용되기 때문에 간단하게 소개했었습니다. 하지만 자바스크립트의 다른언어의 this와 달리 특이하게 사용되고 있으며 자바스크립트의 굉장히 독특한 문법중 하나입니다. 그래서 다시 한 번 this를 알아보려고 합니다. 내용이 별거 없어보이지만 처음 접한다면 보이는 것보다 어렵고 복잡한 키워드이기 때문에 급하신 분들은 주먹구구식으로 하이라이팅된 부분만을 외우시면 됩니다. 물론 코딩에서 외우는 것은 당연히 비추천이기에 나중에 이해가 반드시 수반되어야합니다. 1. this의 단독 사용 우선 this를 따로 혼자서 호출한 경우입니다. 아무것도 없는 상태에서 this만을 호출하면 window를 가리킵니다. const x.. 2021. 11. 12. [React] Hooks 그동안 여러번 언급이 되었던 Hooks. 이제 드디어 Hooks에 대해서 알아볼 시간이 되었습니다. 1. Hook Hook는 리액트 버전 16.8부터 새로 추가된 기능입니다. 이 Hook를 이용하면 기존 클래스형 컴포넌트들에서 이용하던 기능들을 함수형 컴포넌트에서도 이용할 수 있게 되었습니다. Hook가 등장해서 쓰이게 된 계기는 맨 아래 참조의 공식문서에 써있으니 한 번 읽어보시길 권해드립니다. 귀찮으신 분들을 위해 요약하자면 class형 컴포넌트 문법에서 오는 여러 난해함(특히 자바스크립트의 this)들이 주는 어려움과 재사용의 방해를 개선하기 위해 비교적 사용성이 뛰어난 함수형 컴포넌트에서 class형의 상태관리 등을 이용하기 위해 개발된 것이라고 합니다. 이제, 다음부터 나올 몇 개의 포스팅들을 .. 2021. 11. 12. [React] ref 1. ref HTML을 작성할 때 요소에 식별가능한 유일한 이름을 줄때 id를 이용했습니다. 그리고 id를 가지고 이런저런 작업들을 했었는데 이 기능을 리액트에서 이용할 수 있게 해주는 게 ref입니다. ref는 리액트에서 컴포넌트에 이름을 붙여주는 것 입니다. id를 쓰면 자바스크립트~리액트 모든 곳에서 접근할 수 있는데 왜 굳이 리액트에서 ref를 따로 사용하냐면, id속성은 유일한 중복되지 않는 이름입니다. 그래서 리액트 특성상 종종 같은 컴포넌트를 여러번 사용할 때가 있는데, 이렇게 된다면 id가 중복되어서 오류가 발생해버리고 맙니다. 그래서 ref를 id대신 사용하도록 권장되고 있습니다. 리액트의 기능이니 만큼 ref는 리액트 컴포넌트 내부에서만 작동하기에 외부와 충돌할 염려도 없다는 것도 하나.. 2021. 11. 12. Boyer Moore 법 단순하게 처음부터 끝까지 일일히 검사하는 브루트 포스법은 간단하지만 비효율적이라는 단점을 가지고있습니다. 이런 단점을 보완하고자 고안된 방식이 Boyer Moore법이며, 이 방식이 많이 사용되고 있습니다. 1. Boyer Moore 법 Boyer Moore 법은 브루트 포스와는 다르게 키의 마지막 글자부터 처음 글자 순서로 검사를 진행합니다. 검사를 진행하다가 불일치하는 부분이있으면 그 부분만을 집중적으로 검사하고 그 칸수만큼 훌쩍 뛰어넘어 검사를 진행해서 검색 속도를 향상시키는 방법입니다. 다음 배열에서 'ABC'를 검색하려고 합니다. 우선 문자열에 키를 맞춘후 제일 마지막 요소 부터 검사를 시작합니다. 검사를 시작하는데 불일치하는 지점이 발견되었습니다. 그러면 불일치 지점에 대해 키를 이동시켜 비교.. 2021. 11. 12. [Javascript] Nullish coalescing 연산자 1. 널 병합 연산자 Nullish Coalescing Operator 널 병합 연산자는 ES6 이후로 추가된 새로운 연산자입니다. 번역된 이름으로만 보면 뭔가 굉장히 복잡하고 어려워 보이는 이름인데 실제로는 그렇지 않습니다. Nullish Coalescing Operator는 다음과 같이 ??로 작성합니다. 피연산자 ?? 피연산자 이렇게 작성했을때 ??왼쪽의 피연산자가 'null' 혹은 'undefined'라면 오른쪽의 피연산자를 반환하는 역할을 합니다. 그래서 아래와 같은 코드를 작성했을때 오른쪽의 문자열을 반환하게 됩니다. const nullish = null ?? 'Nullish Coalescing Operator'; console.log(nullish); 2. ||와의 차이 배우고 보니 예전에 .. 2021. 11. 12. 이전 1 ··· 13 14 15 16 17 18 19 ··· 52 다음 300x250
