state 소개 props는 사용자가 component를 사용하는 입장에서 중요한 것이고 state는 그 props의 값에 따라서 내부에 구현에 필요한 데이터들 component의 기본적인 동작을 바꾸고 싶을 때 props를 이용하여 component를 조작가능하다. component 내부적으로 사용되는 것들 그것들을 state 라고 한다. 외부의 props라는 것과 그 props에 따라 component를 구현하는 state는 철저히 구분되어 있어야 한다. state 사용 render 함수보다 먼저 실행이 되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor 내부에 작성한다. constructor(props) { super(props); this.state = {...} } 외부 사용..

공부 전략 CODING -> RUN -> DEPLOY CRA 설치: npm install -g create-react-app CRA 세팅: create-react-app . 개발환경 실행: npm run start 빌드: npm run build Component들을 id="root"인 곳에다가 넣기로 약속! 대부분의 파일은 src안에 삽입 (css, js) 등등.. src의 index.js 내부에 있는 코드 ReactDOM.render(, document.getElementById("root")); 중에서 이 Component임 import componentName from 'link' CRA는 상당히 무거움 1.7mb 정도 빌드를 하게 되면 CRA가 공백과 같이 불필요하게 용량을 차지하는 부분을 삭제..

ES6 Class 문법에 대한 정리에 앞서.. 자바스크립트는 객체 기반 또는 프로토타입 기반(Prototype-based) 언어입니다. 그래서 클래스 기반(Class-based)의 객체지향 언어들과는 달리 프로토타입 체인과 클로저 등을 이용하여 상속과 캡슐화같은 개념들을 만들어 냈습니다. 하지만, ES6(ECMAScript 6)에서 Class문법이 추가되었습니다. 이 문법에 대해서 syntax sugar인가 아닌가에 대해 다양한 의견들이 있습니다. 이에 대해선 스스로 다양한 글을 읽고 판단하시는 것을 추천합니다. 자바스크립트에 Class문법이 추가되었다고 했지만, 사실은 Class로 선언된 객체의 속성을 알아보면 Function이라 나옵니다. (더보기 참고) 더보기 // ES5 function Human..

조건문을 작성할 때마다 한 줄로 작성할 수 있을 것 같으면 중괄호를 표시할지 혹은 삼항 연산자를 사용할지 고민하곤 한다. 그래서 이에 대해 커뮤니티에서 얻은 답변 내용과 내 생각을 적어두려고 한다. 결론부터 얘기를 하자면, 정해진 규칙은 없으며 자신의 코드 스타일에 따라서 작성하면 된다고 한다. 하지만 작성 방법에 따라서 오류나 문제가 있을 수는 있다는 것을 기억하자. 스타일이 갈리는 이유를 꼽자면 주로 다음과 같았다. 1. 코드의 간결성 ("나는 짧은 코드가 좋아!") 2. 안정성 ("나중에 코드가 추가되거나 했을 때 오류 생기면 어캄?") 3. 가독성 ("보기 편한 게 가장 좋더라") 솔직히 3가지 다 포기하기 어려운 조건이긴 하다. 하지만 개인적인 생각으로는 2번이 가장 중요하다고 본다. 내가 짠 ..

우선, 객체 리터럴 방식은 다음과 같이 쓸 수 있습니다. let human = { name: "kim", age: 20, call: "010-1111-1234", weight: "60kg" } 그리고 객체 리터럴의 속성에 접근하기 위해 다음과 같이 작성할 수 있습니다. console.log(human.name); // 점 표기법 console.log(human["name"]); // 각괄호 표기법 그런데 만약 객체 리터럴 값이 undifined가 떳다면, 다음과 같은 패턴으로 코드를 작성했을 가능성이 있습니다. let food = { ramen: "ramen!", kimbab: "kimbab!", kimchi: "kimchi!" } let foodname = "remen"; console.log(food..

const SETTING = { name: "LUCKY LOTTO!", count: 6, maxNumber: 46, }; function getRandomNumber() { const lotto = new Set(); // 파라미터에서 디스트럭쳐링 할 수도 있음. const { count, maxNumber } = SETTING; while (lotto.size < count) { // 0~46이 아니라 실제 로또처럼 1~45가 나오게 끔 함. lotto.add(Math.floor(Math.random() * (maxNumber - 1)) + 1); } console.log(lotto); } getRandomNumber(); lotto.has()를 써서 중복검사 처리를 할려다가 lotto.size를 이용..

Map 이란 Map()을 통해 Map을 생성할 수 있습니다. Map은 자바스크립트에 내장된 표준 객체(Standard Built-in Object) 이며, key-value 쌍의 컬렉션입니다. Map의 특징 key를 사용해서 value를 get, set할 수 있습니다. key 값은 중복이 될 수 없으며, 하나의 key에는 하나의 value만 올 수 있습니다. Object와의 차이점 Object는 String과 Symbol 타입만 key로 사용가능 하지만, key는 String, Symbol, Object, Function을 사용할 수 있습니다. Map은 Object와 달리 iterable 입니다. Map의 메서드 WeakMap 이란 key가 약하게 참조되는 key-value 쌍의 컬렉션입니다. Map과의..

SET 이란 new Set() 을 통해 Set을 생성할 수 있습니다. Set은 자바스크립트에 내장된 표준 객체(Standard Built-in Object) 이며, 중복된 값을 허용하지 않는 데이터 집합입니다. 그렇기 때문에, Set에 중복된 값을 넘기게 되면 Set은 알아서 중복된 값을 제외한 배열을 생성합니다. let myset = new Set([1, 2, 3, 4, 1, 2, 1, 5, 6, 7, 7, 8]); console.log(myset); // Set(8) {1, 2, 3, 4, 5, 6, 7, 8} SET의 장점 Set은 중복을 허락하지 않기 때문에, 이미 중복된 값이 존재하는지 체크하지 않아도 됩니다. const myset = new Set([1, 2]); console.log(myse..