천천히 알아가는 세상

안녕하세요. 이번에는 React의 State로 객체, 배열을 사용하는 방법에 대하여 알아보겠습니다. 1. 객체 또는 배열을 State로 사용하는 경우 State는 값이 변경되면 리렌더링을 하지만, 원시 타입의 경우에는 변수에 값이 그대로 들어가 있어서 리렌더링이 발생합니다. 하지만, 객체 타입을 사용하게 되면 변수에는 메모리 주소 값이 들어가 있으며, 메모리 주소에 접속해야 실제 값이 있기 때문에 State의 입장에서는 메모리 값이 변하지 않는 것으로 보이게 되어 리렌더링이 발생하지 않게 됩니다. 이번 코드에서 작업한 거는 메모리 주소를 변경한 것이 아니라 메모리 주소에 연결되어 있는 값을 변경한 것이기 때문에 state에서는 값이 그대로 인 것으로 인식하여 리렌더링이 발생하지 않는다. App.js im..

안녕하세요. 이번에는 객체를 생성할 때 사용하는 클래스를 간단하게 사용해보겠습니다. 자세한 내용은 다른 글을 참조하시기 바랍니다. 클래스 객체를 생성하기 위한 템플릿 ex) 객체 : 고양이 속성 : 이름 – 나비 나이 – 1살 메소드 : mew() – 울다, eat() - 먹는다 자동차를 예시로 들어보겠습니다. 먼저 Car 라는 클래스를 생성합니다. constructor() 함수는 Car 클래스를 만들었을 때 기본적으로 가지게 되는 설정 값이라고 보면 됩니다. 여기서는 constructor(color) 함수 안에 color, isDoor를 설정해놨습니다. isDoor는 true로 값이 설정되어 있지만, color는 인자 값으로 받아서 데이터를 저장하는 것을 볼 수 있습니다. 추가로 move() 함수, s..

안녕하세요. Node.js의 모듈 및 객체에 대해서 알아보겠습니다. 1. 모듈 (Module) 특정한 기능을 하는 함수나 변수들의 집합 재사용 가능한 코드 조각 1-1. 장점 코드 추상화 코드 캡슐화 코드 재사용 의존성 관리 방법1 : module로서 a, b, test 함수를 내보내겠다. const a = 'a변수'; const b = 'b변수'; function test() { console.log('test'); } // module로서 a, b, test 함수를 내보내겠다. module.exports = { a, b, test } 방법2 : 각 변수를 바로 넘겨주는 방법 const aa = 1; const bb = 3; // 방법 2 module.exports = { aa, bb } 방법3 : 변..

안녕하세요. 이번에는 JavaScript의 객체에 대해서 간단하게 알아보겠습니다. 자세한 내용을 알고 싶으시면 다른 페이지를 참고하시는 것을 추천드립니다! 1. 객체 속성 - 객체 안에 존재하는 명사들 실생활에서 우리가 인식할 수 있는 사물 또는 동 ex) 고양이 속성 - 이름 - 나비 - 나이 - 1 메서드 - mew() - 울다 - eat() - 먹다 예시로 고양이를 가지고 생각한다면 속성으로는 이름과 나이라고 할 수 있고 메서드로는 울다, 먹다와 같은 행동을 표현할 수 있습니다. 위 내용을 코드로 작성한다면 다음과 같이 작성할 수 있습니다. var cat = { name: “나비”, age : 1, mew : function() { return “냐옹”; } }; console.log를 이용해서 c..

클래스(Class) 클래스에는 객체를 생성하기 위한 필드와 메소드가 정의되어 있다.클래스로부터 만들어진 객체를 해당 클래스의 인스턴스(instance)라고 한다.예를 들면 자동차 객체는 자동차 클래스의 인스턴스이다. 클래스로부터 객체를 만드는 과정을 인스턴스화라고 한다. 클래스 중 main() 메소드가 없는 클래스는 객체 생성 과정을 거쳐 사용해야 한다. 클래스의 이름을 작성할 때 규칙이 있다. 1. 하나 이상의 문자로 이루어져야 한다. 2. 첫 번째 글자는 숫자가 올 수 없다. 3. $, _ 외의 특수 문자는 사용할 수 없다. 4. 자바 키워드는 사용할 수 없다. (int, for, while 등) 권장 및 주의사항 * 한글을 사용해도 상관없지만, 영어를 사용하는 것을 권장한다. * 영어 대소문자를 다..