JavaScript (9) 썸네일형 리스트형 React에서의 input 태그 사용법 React에서 input태그를 사용하는 방법input태그는 사용자가 입력을 해도 컴포넌트가 변하지 않습니다. re-rendering이 일어나지 않습니다.1. useRef를 사용하는 방법 (권장하지 않음)id를 사용하지 않고 대신 ref를 사용하는 방법입니다.ref를 만드는 이유는 DOM 요소를 사용해야할 경우에 사용하기 위함입니다. ( 빈도 수는 적음)input 태그는 빈 곳에 입력을 하거나, 이미 있던 내용을 보여주기 위함의 2가지 목적이 있다는 것을 기억해보면 이 방법은 추천하지 않습니다.2. state를 사용하는 방법value는 re-rendering이 안되기 때문에 일반적으로 input태그를 쓸때는 ref가 아니라 state로 빼라고 말하곤 합니다.사용자가 입력을 하면 그 입력값을 가지고 stat.. UseState useState Hook리액트의 컴포넌트가 re-rendering 하는 조건 중 하나는 컴포넌트 안에 있는 state가 변경되었을 경우입니다.useState는 리액트가 컴포넌트들을 모니터링하기 위해 만들어진 개념입니다.state로 데이터를 만들면 리액트가 모니터링을 할 수 있습니다.리액트는 컴포넌트의 상태가 변경되었음을 알아야하기 때문에 리액트에서는 useState를 사용하여 상태를 관리합니다.useState는 배열을 반환 하는 호출가능한 함수이다.함수 실행 시 컴포넌트에 있는 값을 쓰는 것이 아니라 useState를 통해 가져온 배열을 사용하는 것배열의 첫번째 요소는 초기화된 값이며, 두 번째 값은 초기값을 변경할 수 있는 함수로 구성되어 있습니다.useState 훅은 실제로 react 패키지에 들어있.. React 구조 디자인 매뉴얼 react는 Dom이 아닌 JavaScript를 중심으로 생각한다.=> 이 패러다임을 받아들여야한다.더 효과적인 컴포넌트를 구성하는 방법아토믹 디자인은 기획 설계 시 적용하고, 실제 구현단계에서는 적용하기 어렵다.때문에 구현 단계에서는 반대로 위에서 부터 아래로 뿌려주는 형태로 개발한다.컴포넌트를 외부로 많이 뺀다고 해서 재사용성이 좋지 않았다.이후에는 모듈이라는 단위로 빼기 시작한다.설계 원칙확장성과 재사용성 있는 코드topic에 따른 코드 분리와 단일 책임을 가지는 컴포넌트를 만들어야함외부에 제어를 위임시키는것을 고려하자.리액트에서 배열 선언하는 2가지 방법컴포넌트 안에 배열을 선언하는 방법컴포넌트 바깥에 배열을 선언하는 방법방법을 선택하는 기준컴포넌트 안에 있는 변수나 상수를 써야하는 경우는 배열을.. 함수형 프로그래밍 패러다임의 좋은 코딩 습관 - let보다는 가급적 const를 사용 functional programming의 시작은 불변성 유지이다. let사용을 줄이고 const로 개발하는 습관을 권장 수정된 값이 필요할 때에는 create new variable . Do Not This: let foo = 100 ... foo = somthing(foo, "bar") Do This: const foo = 100 ... const new_foo = somthing(foo, "bar") - Array, Date의 Mutaion Method를 가급적 지양 push, pop, shift, sort, reverse 등 객체를 변하는 Method를 가급적 spread operator로 대체하거나 값을 복사해서 사용 권장!! Do Not This: co.. [YOU DON'T KNOW JS] Chapter2. Call-Site(함수 호출부) #YouDontKnowJS 호출부 this는 Call-Site에서 함수를 호출할 때 바인딩된다. 호출부를 파악하려면 먼저 호출 스택을 확인하는 곳이 용이하다. this 바인딩은 오직 호출부와 연관되기 때문에 코드를 유심히 살펴봐야한다. ** 브라우저 혹은 개발환경의 디버깅 콘솔로 Call-Stack을 추적해보자 ** 2.2 Binding Rules Default Binding 첫 번째 규칙은 Standalone Function Invocation(단독 함수 실행)이다. 가장 기본적인 this의 규칙이다. function foo(){ console.log(this.a) } var a = 2; //전역 스코프에 변수를 선언하면 변수명과 같은 이름의 전역 객체 프로퍼티가 생성된다. (! 사본이 아니다.) fo.. [JavaScript] DataType 8 Type Primitive Type number : 모든 수가 실수 string : 문자열 boolean : true or false undefinded: var keyword로 선언된 변수에 암묵적으로 할당되는 값 null : 값이 없다는 것을 의도적으로 명시 symbol (ES6) Bigint (ES11) : 숫자값 표현 최대치보다 큰 정수를 표현 정수 리터럴 뒤에 n을 붙이거나, Bigint함수 호출 Example) 10n or Bigint(10) Object/reference Type object, function, array NaN : 산술 연산 불가 Infinity /-Infinity : 양/음의 무한대 String JS에서 string은 primitive type이며, immutable .. [JavaScript] Variable Variable ( memory address + value) What is the Variable It's Assignment that save value in variable. and Reference(참조) is reading value in variable Identifier Identifier is Variable's name and it remember memory address. not value. Variable declaration It's Variable Declaration that create variable. To additional To allocate memory context To name binding for save value ** Variable declaration에 .. [YOU DON'T KNOW JS] Chapter1. This 1. this가 함수 그 자체를 가리킨다는 것은 오해이다. this는 이름 그 자체로 이해하면 안된다. function foo(num){ console.log("foo " + num); this.count++ //추가된 프로퍼티와는 다른 객체이다. } //foo라는 함수 객체에 count 프로퍼티가 추가 foo.count = 0; for (let i=0; i5){ foo(i); } } console.log(foo.count) /* Console : "foo 6" "foo 7" "foo 8" "foo 9" 0 */ this.count에서 this는 함수 객체를 바라보는 것이 아니다. 프로퍼티 명이 똑같아서 헷갈릴 수 있지만 근거지를 둔 객체 자제가 다르다. ** this는 자기 참조를 할 수 없다. ** .. 이전 1 2 다음
