JavaScript14 [JavaScript] Render Props Pattern 알아보기 자바스크립트 패턴 스터디에서 설명한 render props pattern 관련 글이다. 요약:컴포넌트에 JSX를 리턴하는 함수 props를 제공한다.render prop를 받는 컴포넌트는 단순히 props로 넘겨받은 함수를 호출해서 JSX를 렌더링할수도 있지만, 함수에 인자도 전달할 수 있다.Basic - Counter 예제 +를 누르면 1 증가, -를 누르면 1 감소위에 있는 숫자는 현재 수, 아래에는 해당 수의 제곱을 보여줍니다.Basic : App으로 상태를 끌어 올림function Counter({ value }) { return {value};}function CounterPower({ value }) { return {value * value};}function Button({ onClic.. 2023. 8. 1. [JavaScript] This : binding 중심 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체, 또는 자신이 생성할 인스턴스의 property나 method를 참조할 수 있다. JS의 this는 함수가 호출되는 방식에 따라 this의 바인딩이 동적으로 결정된다. 호출 방식 this 바인딩 예제 해설 일반 함수 호출 global object가 바인딩 전역 객체 window를 가리킨다 메서드 호출 method를 호출한 객체 method를 호출한 객체 obj 생성자 함수 호출 생성자 함수가 생성할 인스턴스 생성자 함수가 생성한 인스턴스 prototype의 apply/call/bind method에 의한 간접 호출 첫 번째 인수로 전달한 객체 인수에 의해 결정 예제 const foo .. 2022. 2. 24. [JavaScript] Wrapper Object 모던 자바스크립트 Deep Dive 21장을 읽으며 정리한다. 문자열이나 숫자, 불리언 등의 원시값이 있는데도 불구하고, String, Number 등의 표준 빌트인 생성자 함수가 존재하는 이유는? 궁금했던 질문이기에 웅장하게 인용해봤다. 또, 평소 아무렇지 않게 사용했던 문자열 관련 property와 method... 생각해보면 객체처럼 동작하고 있지 않은가? 원시값은 객체가 아닌데? const str = 'Fruit'; console.log(str.length); // property처럼 생겼다!? console.log(str.toUpperCase()); //FRUIT, method처럼 생겼다?! 되돌아보니까 정말 object처럼 쓰고 있었다! 왜 이게 되는 걸까? → 원시 값을 객체처럼 사용하면, .. 2022. 2. 23. [JavaScript] Prototype Chain/직접 상속 모던 자바스크립트 Deep dive 19장. 나중에 읽어볼 기회가 있다면 꼭 그림을 같이 보며 확인하자. 프로토타입 체인 자바스크립트는 객체의 property/method에 접근하려고 할 때 해당 객체에 접근하려는 property가 있는지 체크한다. 만약 없다면, [[ prototype ]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 prototype의 property를 순차적으로 검색한다. 이를 prototype chain이라고 한다 → JS가 객체지향 프로그래밍의 상속을 구현하는 매커니즘 end of prototype chain : 프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype다. 따라서 모든 객체는 Object.prototype를 상속받는다. Object.p.. 2022. 2. 17. 이전 1 2 3 4 다음
