JavaScript

리액트 공부를 하다가 {props.items.map((expense) => { })} 이 경우에는 화면이 잘 랜더링 되지 않는데 {props.items.map((expense) => ( ))} 이 경우에는 결과가 잘 나오는 현상이 발견되었습니다. 그동안 화살표 함수는 습관적으로 ( ) => { } 와 같은 모양으로 사용했었기 때문에 ( ) => ( ) 와 뭐가 다른지 찾아보았습니다. ( ) => ( ) 화살표 함수에서 괄호 안에 JSX를 직접 작성하면 암시적으로 값을 리턴합니다. 즉, 'return' 키워드를 사용하지 않아도 됩니다. 이것을 JSX를 감싸는 괄호의 암시적인 리턴이기 때문에 JSX를 감싸는 괄호 안의 내용이 컴포넌트의 반환값으로 취급됩니다. ( ) => { } 중괄호 내부에서 명시적으로 '..

객체나 배열을 변수로 '분해' 하는 JavaScript 표현식입니다. 배열 분해하기 let foo = ["one","two","three"]; let [red, yellow, green] = foo; console.log(red); // "one" console.log(yellow); // "two" console.log(green); // "three" red에는 foo[0], yellow에는 foo[1], green에는 foo[2]가 할당되었습니다. 인덱스를 이용하지 않고도 변수만으로 배열의 내용을 사용할 수 있게 되었습니다. 이 과정에서 foo는 파괴되지 않습니다. 단지 배열의 요소를 직접 변수에 할당하는 것보다 코드의 양이 줄어들 뿐입니다. 쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수있습니..

파일을 여러 개로 나눠서 유지 보수가 쉽게 만들기 위해 필요한 기능입니다. export한 대상을 다른 파일에서 import 하여 사용합니다. import, export 기능을 이용하려면 태그에 type="module" 속성이 필요합니다. 변수나 함수 앞에 export, import //util.js export let apiKey = "sadjfhksdajfwekqj12323j0"; export let abc = "abc"; //app.js ----------------------------------------------- // 한 개 import import { apiKey } from "./util.js"; console.log(apiKey); ------------------------------..

defer

React를 배우기 전 JavaScript를 마스터 할 수있으면 좋겠지만 현실은 그렇지 못합니다. 그래서 React application을 개발할 때 많이 쓰이는 JavaScript 기능들을 배우는 것이 효율적입니다. React를 배우기 전에 익숙해져야 할 JavaScript의 기능들은 다음과 같습니다. ES6 클래스 let/const 변수 선언 Arrow functions Destructuring assignment Map and filter ES6 module system ES6 클래스 ES6은 Java나 Python 같은 객체지향 언어와 유사한 방식으로 사용되는 클래스 구문을 도입했습니다. ES6의 기본적인 클래스는 다음과 같이 작성됩니다. class Developer{ constructor(nam..