전체 글

문자열이 숫자인지 체크하기

자바스크립트에서 문자열이 숫자인지 체크하는 방법은 isNaN( ) 함수를 이용한다. isNaN(테스트할값) 파라미터가 숫자가 아닐 경우 true 를 리턴하고, 파라미터가 숫자일 경우 false 를 리턴한다. '123', '123.1', 123, -123, .1 문자열 타입이든 숫자 타입이든 숫자가 입력되면 false 를 리턴한다. 'abc' 문자열이 입력되면 true 를 리턴한다. '123+123' 숫자로 이루어진 문자열 안에 숫자가 아닌 '+' 기호가 있어 true 를 리턴한다. undefined, { } undefined, { } 는 true 를 리턴한다. '', ' ', null, true, false, [ ] 빈 문자열, null, boolean 값, 배열은 false 를 리턴한다. new Dat..

조건부 렌더링

조건부 렌더링이란 특정 조건에 따라 다른 결과물을 렌더링 하는것을 의미한다. JSX 에서 null, false, undefined 를 렌더링 하게 된다면 아무것도 나타나지 않게 된다. 삼항 연산자: 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용 && 연산자: 특정 조건이 true 이면 보여주고 그렇지 않다면 숨겨주는 단순 처리의 경우 조건부를 이용하여 Hello 컴포넌트에서 isSpecial 이 true 이냐 false 이냐에 따라 컴포넌트의 좌측에 * 표시 해보자. isSpecial 값이 true 라면 * 를, 그렇지 않다면 null 을 보여주도록 한다. App.js import React from 'react'; import Hello from './Hello'; import Wrapper f..

props

props 사용법 props 는 properties 의 줄임말이다. 우리가 어떠한 값을 컴포넌트에게 전달해주어야 할 때 props 를 사용한다. 예를 들어 App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name 이라는 값을 전달해주고 싶다고 가정하자. 컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회할 수 있다. 받는 쪽은 props 라는 예약어를 통해서 받는다. props 는 객체 형태로 전달되며 만약 name 값을 조회하고 싶다면 props.name 으로 조회하면 된다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js..

JSX

JSX는 리액트에서 생김새를 정의할 때 사용하는 문법이다. HTML같이 생겼지만 실제로는 Javascript 이다. return 안녕하세요; 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel 이 JSX 를 Javascript 로 변환 Babel 이란? 자바스크립트의 문법을 확장해주는 도구이다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써 구형 브라우저 같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 한다. JSX 기본 규칙 JSX 가 Javascript 로 변환이 되려면 지켜야하는 규칙 태그는 꼭 닫혀야 한다. 두 개 이상의 태그가 존재한다면 꼭 하나의 태그로 감싸져야 한다. JSX 내부에 Javascr..

리액트 컴포넌트

리액트 컴포넌트 리액트 컴포넌트를 만들 땐 import 를 통하여 리액트를 불러와줘야 한다. import React from 'react'; 리액트 컴포넌트는 함수, 클래스 형태로 작성할 수 있다. 리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX 라고 부른다. 코드의 최하단에는 컴포넌트를 내보내주는 코드를 작성해준다. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용할 수 있다. 컴포넌트는 일종의 UI 조각으로 쉽게 재사용할 수도 있다. export default Hello; Hello.js import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; App.js Hello.js 컴포넌트를 다른 ..

React 작업환경 준비

설치 Node.js : Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져 있다. 그렇기에 해당 도구들을 사용하기 위해서 Node.js 를 설치한다. Yarn : Yarn 은 조금 개선된 버전의 npm 이라고 생각하면 된다. npm 은 Node.js 를 설치하게 될 때 같이 딸려오는 패키지 매니저 도구이다. 프로젝트에서 사용되는 라이브러리를 설치하고 해당 라이브러리들의 버전관리를 하게 될 때 사용한다. Yarn 을 사용하는 이유는 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 위함이다. 코드 에디터 : 주로 VS Code 를 사용한다. 이 외에도 Atom, WebwStorm, Sublime 이 있다. Git bash : 윈도우의 경우 Git for win..

비구조화 할당(구조분해)

비구조화 할당(구조분해) 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언 const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 함수의 파라미터에서 비구조화 할당 const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object); 비구조화 할당 시 기본값 설정 만약에 비구조화 할당 후 값이 주어지지 않는다면 undefined 가 나타날 것이다. 이러한 상황에 기본값을 주고 싶다면 이렇게 해줄 수 있다. const object = { a: 1 }; func..

조건문 활용

특정 값이 여러값 중 하나인지 확인해야 할 때 includes 비교해야 할 값이 많아질 수록 코드는 길어지게 된다. function isAnimal(text) { return ( text === '고양이' || text === '개' || text === '거북이' || text === '너구리' ); } console.log(isAnimal('개')); // true console.log(isAnimal('노트북')); // false 이러한 코드를 간단하게 해결할 수 있는 방법은, 배열에 includes 함수를 사용하는 것이다. function isAnimal(name) { const animals = ['고양이', '개', '거북이', '너구리']; return animals.includes(nam..

함수의 기본 파라미터

함수의 기본 파라미터 기본 파라미터란 함수를 호출하게 될 때 원래 넣어야 할 파라미터를 넣지 않게 되었을 때 기본값으로 사용할 값을 지정하는 것을 의미한다. 지금까지 배운 것들을 활용하여 파라미터가 주어지지 않았을 때 기본값을 사용하도록 다음과 같이 작성할 수 있다. 더보기 예시 원의 넓이를 구하는 함수 function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(4); console.log(area); // 50.26548245743669 여기서 Math.PI 는 원주율 파이(π) 값을 가리킨다. 만약 이 함수에 r 값을 넣어주지 않으면 어떻게 나타날까? function calculateCircle..

단축 평가 논리 계산법

단축 평가 논리 계산법은 논리 연산자를 이용해서 코드를 좀 더 단축해서 쓰는 것을 의미한다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용할 때 무조건 우리가 true 혹은 false 값을 사용하는 것은 아니다. 문자열이나 숫자, 객체를 사용할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라진다. 만약 함수에서 animal 값이 제대로 주어졌을 때만 name 을 조회하고, 그렇지 않을 때는 그냥 undefined 를 반환하게 하고 싶으면 어떻게 해야할까? const dog = { name: '멍멍이' }; function getName(animal..

Truthy / Falsy

이것은 자바스크립트 문법까지는 아니지만 알아둬야 하는 개념이다. Truthy : true 같은거 console.log(3); console.log('hello'); console.log(['array?']); console.log([]); console.log({ value: 1 }); Falsy : false 같은거 console.log(undefined); console.log(null); console.log(0); console.log(''); console.log(NaN); *NaN: Not A Number NaN은 보통 문자열을 숫자로 변환하는 자바스크립트 기본함수 parseInt 라는 함수를 사용하게 될 때 볼 수 있다. 예시 print 함수가 파라미터가 비어진채로 실행됐을 때 functio..

삼항 연산자

사용법 조건 ? true일때 : false일때 예를 들어 특정 조건에 따라 text 값이 달라야하는 상황이 있다고 해보자. const array = [1, 2]; let text = ''; if (array.length === 0) { text = '배열이 비어있습니다.'; } else { text = '배열이 비어있지 않습니다.'; } console.log(text); // 배열이 비어있지 않습니다.ㅁ 삼항 연산자를 이용하여 다음과 같이 작성할 수 있다. const array = []; let text = array.length === 0 ? '배열이 비어있습니다' : '배열이 비어있지 않습니다.'; console.log(text); 중첩 (비추천) 가독성이 그렇게 좋지 않으니 이러한 코드는 피하는 것..