본문 바로가기

전체 글127

React - JavaScript 응용하기 (스프레드 연산자) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 이전 포스팅에서 잠시 소개해드렸든 스프레드 연산자를 간단하게 소개하고자 합니다. 간단하게 설명하는 것이니 만큼 예제코드로 이해만 쉽게 하시면 도움이 될 것 같습니다. 스프레드연산자는 객체의 중복되는 항목들을 보다 쉽게 사용할 수 있는 연산자입니다. 먼저 예시를 살펴보고, 이를 코드로 구현해보겠습니다. const cookie = { base: 'cookie', madeBy: 'cookieCom', }; const chocolate = { base: 'cookie', madeBy: 'cookieCom', topping: 'chocolateChip', }; const whiteCookie = { base: 'cookie', madeBy: 'cookieCom', .. 2023. 8. 6.
React - JavaScript 응용하기 (비 구조화 할당) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 구조분해할당 혹은 비 구조화 할당(Destructuring Assignement) 라는 표현식을 알아보도록 하겠습니다. 이 응용방법은 배열이나 객체의 속성을 말 그대로 구조화 되어 있는 상태, 배열로 되어 있는 요소를 꺼내어 개별적으로 사용하거나, 객체의 속성을 개별적으로 사용하는 방법을 뜻합니다. 1. 배열 비구조화 할당 배열을 구조화 할당하는 코드는 간단하게 작성해볼 수 있습니다. 먼저 예제 코드를 작성해보도록 하겠습니다. const ArrayA = [1, 2, 3, 4, 5, 6, 7, 8, 9]; let ArrayOne = ArrayA[0]; let ArrayTwo = ArrayA[1]; let ArrayThree = ArrayA[2]; let Ar.. 2023. 8. 5.
React - JavaScript 응용하기 ( 조건문) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 기존에 소개드렸던 조건문을 보다 효율적으로 사용하기 위한 작성을 사용해보려고 합니다. 바로 시작해보겠습니다. 이를 위해 간단한 코드를 작성해보겠습니다. 1. 기존의 조건문 작성하기 먼저 국가 코드를 기존처럼 한번 작성해보도록 하겠습니다. const checkCountryName = (Code) => { if ( Code === 'KR' || Code === 'Korea' || Code === 'South Korea' || Code == 'KOR' ) { return true; } return false; }; const CountryCodeA = checkCountryName('KR'); const CountryCodeB = checkCountryName(.. 2023. 8. 5.
React - JavaScript 응용하기 ( 단락회로 평가) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 논리연산자를 활용하여 단락회로 평가 응용을 사용해보도록 하겠습니다. 기존의 포스팅에서 논리연산자를 한번쯤 살펴보시기를 권합니다. 시작해보겠습니다. 1. 단락회로기법 알아보기 논리연산자는 3개의 연산자가 존재합니다. console.log(true && false); console.log(true || false); console.log(!true); 각각의 역활은 이미 잘 알고 계시다시피 , && (and 연산) || (or 연산) , ! (반전 연산)으로 이루어져 있습니다. 이를 통해 논리연산자로, 각 조건이 참인지를 분리할 수 있습니다. 하지만, 여기서 우리는 몇가지 조건의 처리방식에 주목해야 합니다. 가령 예를 들면, 논리연산자 중, 반전연산자를 제외한.. 2023. 8. 5.
React - JavaScript 응용하기 (삼항연산자) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 JavaScript 에서 조건문을 더 간결하게 작성할 수 있는 삼항연산자를 알아보도록 하겠습니다. 이를 사용하면 코드를 더욱 간결하게 작성할 수 있습니다. 작성예시를 빠르게 살펴보도록 하겠습니다. 1. 기존의 If 예시문 하나 만들기 let a = 3; if (a >= 0) { console.log('a is +'); } else { console.log('a is -'); } 위와 같이 작성한 예시를 살펴보면 a 라는 변수의 값이 양수인지 음수인지만 판단하는 조건문이 완성되었습니다. 하지만 코드가 5줄에 걸쳐 작성되는 모습을 볼 수 있습니다. 이를 이제 삼항연산자로 작성하게 되면 더욱 간결하게 작성할 수 있습니다. let a = 3; a >= 0 ? co.. 2023. 8. 5.
React - JavaScript 응용하기 ( Truthy, Falsy) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 JavaScript 를 추가로 응용하기 좋은 몇가지를 소개해드리려고 합니다. 몇가지 기능에 대한 소개를 드리는 첫번째 포스팅에서는 Truthy, Falsy 입니다. 일명 참같은 값, 거짓같은 값이라는 의미를 가진 이 두가지를 알아보도록 하겠습니다. let a = ''; if (a) { console.log('a is true'); } else { console.log('a is false'); } 위의 값은 어떻게 결과가 출력될까요? 결과는 False 입니다. 문자열이 비어있는 것으로, false가 출력됩니다. 하지만, 이를 문자열을 넣거나, 빈 배열, 혹은 빈 객체를 넣게 되면 어떻게 될까요? 바로 true 로 출력됩니다. 물론 undef.. 2023. 8. 5.

티스토리툴바