전체 글127 useState 리액트에서 가장 중요하다고 볼 수 있는 useState에 대해 알아보자. state란 컴포넌트가 가질 수 있는 상태를 의미한다. App이라는 컴포넌트 안에서 state로 counter라는 state를 가질 수있다. 이런한 state를 우리는 리액트에서 useState를 통해 컴포넌트의 상태를 생성하고 업데이트 및 변경할 수 있게 도와준다. setState를 사용하여 state를 변경하면 해당 컴포넌트는 다시 실행된다.(렌더링) useState는 자바스크립트 destructuring문법을 사용한다. array안에 있는 데이터를 변수로 쉽게 저장하고 싶을때 사용하는 문법이다. 각각 name,age라는 변수를 사용할 것 없이 왼쪽 오른쪽의 형식을 멎추어주면 자동으로 변수가 샹성된다. useState를 사용한 .. 2022. 7. 11. 자바스크립트 배열 메소드 정리! sort 배열 오름 차순, 내림차순으로 정렬한다. join 배열을 문자열로 반환한다. 배열.join(); // 구분자를 넣지 않으면 컴마가 포함되어 문자열로 합쳐진다. 배열.join(','); // 구분자를 넣어주면 아이템 사이에 구분자를 넣어서 문장으로 합쳐진다. split 문자열을 배열로 변환한다. 문자열.split(); // 구분자를 넣지 않으면 글자 하나하나, 띄어 쓰기까지 다 잘라 한덩어리의 배열로 만든다. 문자열.split(',') // 구분자를 기준으로 쪼개져서 배열로 변환. reverse 배열의 아이템 순서를 뒤집는다. 배열.reverse(); splice 배열의 인덱스로부터 몇번째까지 살리고 나머지는 삭제한다. 배열.splice(인덱스, 인덱스부터 몇번째까지); 세번째 인자로 추가도 가능.. 2022. 6. 3. 자바스크립트 개발자가 알아야할 33가지 개념[#16. new, Constructor, instanceof and Instances] new new 연산자는 생성자 함수를 이용해서 새로운 객체 인스턴스(Instances)를 만들때 사용하는 연산자이다. 물론 객체를 만들때 {}를 사용하여 쉽게 만들 수 있지만 유사한 객체를 여러개 만드는 것에 대해선 한계가 있다. alistar와 alistar2는 키, 프로퍼티가 같다. 그러면 새로운 객체를 만들때마다 {}를 사용하면 생성자 함수를 사용할 필요 없이 간단하게 만들 수 있는데 왜 굳이 생성자 함수와 new를 사용해야할까? Constructor(생성자) JAVA에서는 Class가 객체를 생성한다면 자바스크립트 생성자(constructor)함수가 그 역할을 대신한다. 만약 위의 객체처럼 키, 밸류가 2개뿐이 아니라 100개가 있고 매소드도 100개가 있고 또 객체의 각각 마다 속성이 다르다면 .. 2022. 5. 31. 자바스크립트 개발자가 알아야할 33가지 개념[#15. this, call(), apply() and bind()] this this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. 자바스크립트 엔진에 의해 암묵적으로 생성되며 객체의 프로퍼티나 메소드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메소드 내부 또는 생성자 함수 내부에서만 의미가 있다. 전역객체 전역객체는 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 Window, Server-side(Node.js)에서는 global객체를 의미한다. 또한, 전역객체는 전역 스코프를 갖는 전역변수를 프로퍼티로 소유한다. 글로벌 영역에 선언한 함수는 전역객체의 프로퍼티로 접근할 수 있는 전역 변수의 메소드이다. 함수의 this 기본적으로 this는 전.. 2022. 5. 30. 자바스크립트 개발자가 알아야할 33가지 개념[#14. Factorise and Classes] Class 자바스크립트에서의 클래스는 프로토타입을 기반으로 만들어진 특수한 함수이다. 따라서 함수를 정의하듯 클래스 선언과 표현식으로 정의 할 수 있다. Class Declaration class 키워드를 사용해 클래스 선언을 통한 정의가 가능하다. function키워드를 통한 함수 선언은 호이스팅이 일어나지만 class키워드를 통한 클래스 선언은 클래스를 사용하기 전에 선언 해야한다. 클래스 표현을 통한 클래스 정의는 클래스 이름을 가질 수도 있고, 그렇지 않을 수도 있다. 클래스 표현식으로 정의된 클래스 이름은 함수 표현식과 마찬가지로 내부 범위에서만 유효하며 사용된 클래스 이름은 외부 범위에서 접근 불가하다. Strick Mode 클래스 내부(body)는 strict mode로 실행된다. 성능 향상.. 2022. 5. 27. 자바스크립트 개발자가 알아야할 33가지 개념[#13. DOM and Layout Trees] 웹 개발은 웹 브라우저와 밀접한 연관이 있다. 모든 서비스는 사실 브라우저를 바탕으로 실행이 된다고 봐도 과언이 아니다. 이 브라우저와 관련된 객체 모델(Browser Object Model, BOM)이라고 하고 BOM을 이용해 브라우저 관련된 기능을 구성한다. DOM은 이BOM중 하나이다. DOM (Document Object Model) 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이를 객체를 부자 .. 2022. 5. 25. 이전 1 ··· 16 17 18 19 20 21 22 다음
