JavaScript (11) 썸네일형 리스트형 useEffect의 dependency array useEffect는 리엑트에서 side effect를 처리할 때 사용하는 함수입니다 쉽게말해 사이드 이펙트가 발생할꺼같은 코드는 useEffect에 넣어 처리합니다 useEffect에는 dependency array라는것이 있습니다 useEffect는 1번째 인자로 실행시킬 함수가 들어가고 2번째 인자로 배열이 들어가는데 이 배열을 dependency array라고 합니다 2번쨰 인자를 생략하면 렌더링 될때마다 1번째 인자로 준 함수가 실행되고 2번째 인자를 넣으면 2번째 인자값이 변할때마다 실행됩니다 처음 1번만 실행하고 싶다면 빈 배열을 넣으면 됩니다 사용 예시로는 ajax 요청, DOM reference 참조 및 변경을 할때 side effect가 발생하는데 이런 처리를 할때 useEffect로 처.. React 컴포넌트의 key 속성 리엑트에서 key속성은 어떤 항목을 변경,추가,삭제할지 식별하는것을 돕는 역할을 합니다 리엑트는 컴포넌트의 상태나 속성이 변할때마다 렌더링을 하는데 효율적으로 동작하기 위해 모든것을 랜더링하지 않고 바뀐 부분만 재렌더링을 합니다 이때 바뀐 부분을 체크하기 위한 방법으로 리엑트의 key를 사용합니다 key값을 설정 할 때 조건으로는 유일한 값을 지정해야 됩니다 key값을 설정하면 장점으로는 전체를 렌더링하지 않고 바뀐 부분만 효율적으로 렌더링을 할 수 있다는 장점이 있습니다 React Props, State 프롭스(Props)는 외부로부터 전달받은 값이고 스테이트(State)는 컴포넌트 내부에서 변할 수 있는 값을 의미합니다 먼저 프롭스의 특징으로는 프롭스는 객체형태로 어떤 타입의 값도 전달 할 수 있고 사이드 이펙트를 막기 위해 프롭스는 읽기 속성이라는 것 입니다 즉 프롭스는 부모가 자식에게 전달해주는 객체형태의 데이터이며 변하지 않는 불변성을 가졌습니다 스테이트는 내부에서 변할 수 있는 값을 의미합니다 컴포넌트내에서 변할 수 있는 값은 스테이트로 다루어야 됩니다 예를들어 사용자가 값을 입력하는 input이나 textarea의 값은 사용자가 입력할때마다 변하기 때문에 스테이트로 데이터를 다루는것이 적절합니다 또한 스테이트의 값이 변경되면 자동으로 재랜더링을 해주기 때문에 실시간으로 바뀌면서 그것을 보여줘야.. Promise의 기능과 필요한 이유 프로미스(Promise)는 자바스크립트 비동기 처리에 사용되는 객체입니다 비동기 처리는 특정 코드의 연산이 끝나길 기다리지 않고 다음 코드를 처리하는것을 의미합니다 비동기에 대한 예시로 전화와 문자가 있습니다 전화를 받을때 하던일을 멈추고 전화를 받고 상대방에게 바로 대답을 해야되지만 문자는 확인만 한 후 나중에 응답해줘도 됩니다 전화는 동기적으로 처리하고있고 문자는 비동기적으로 처리를 하고 있습니다 비동기의 장점으로는 비동기요청에 따른 결과가 반환되는 시간 동안 다른 작업을 수행할 수 있습니다. 비동기 처리를 하기 위한 방법으로는 콜백 함수로 비동기처리를 하는 방법이 있습니다 하지만 비동기처리를 많이 해야되는 경우 콜백안에 콜백을 여러번 사용해야되고 코드의 가독성이 떨어집니다 이것을 콜백지옥이라고 합니.. 프로토타입 체인 HTML 삽입 미리보기할 수 없는 소스 위 코드를 보면 Person 생성자 함수에 의해 생성된 인스턴스 me 객체는 Object의 메서드를 사용하고 있다 이를 통해 알수있는것은 me의 객체가 Person 프로토타입의 프로퍼티 뿐만아니라 Object 프로토타입의 프로퍼티를 상속받은것을 알 수 있다 자바스크립트에서는 객체의 프로퍼티(메서드 포함)에 접근 할 때 접근하려는 프로퍼티가 없다면 프로토타입 내부 슬롯의 참조를 따라 순차적으로 검색합니다 ( me -> Person -> Object 순으로 검색하여 hasOwnProperty() 를 찾아 me 객체가 사용한것입니다) 이것을 체인처럼 연결되어있다고 하여 프로토타입 체인이라고 합니다 프로토타입 체인은 객체지향 프로그래밍에서 상속을 구현하는 방식입니다 프로토.. 프로토타입 프로토타입 객체 프로토타입은 객체지향의 핵심인 상속을 구현하기 위해 사용됩니다 프로토타입은 부모객체의 역할을 하는 객체로 다른 객체에 공유 프로퍼티를 제공합니다 프로퍼티를 상속받은 하위객체는 부모객체의 프로퍼티를 자유롭게 사용 할 수 있습니다 모든 객체는 [[Prototype]] 이라는 내부 슬롯이 있으며 [[Prototype]] 에 저장되는 프로토 타입은 객체 생성 방식에 의해 결정됩니다 __proto__ 접근자 프로퍼티 모든 객체는 __proto__ 접근자 프로퍼티를 사용하여 [[Prototype]] 내부에 간접적으로 접근이 가능합니다 HTML 삽입 미리보기할 수 없는 소스 __proto__ 접근자 프로퍼티를 사용하여 [[Prototype]] 내부에 간접적으로 접근이 가능하지만 권장하지 않는 방법입니.. 객체지향 프로그래밍이란? 객체지향 프로그래밍은 독립된 객체(Object)의 집합으로 프로그래밍을 표현하는 패러다임 입니다 객체지향 프로그래밍의 장점으로는 상속을 통한 코드 재사용성이 좋고 캡슐화를 통해 유지보수의 우수성이 있고 대형 프로그래밍의 경우 클래스(객체)단위로 모듈화 개발을 통한 업무분담에서 장점이 있습니다 사람을 객체로 표현하자면 아래와 같은 코드로 작성 할 수 있습니다 HTML 삽입 미리보기할 수 없는 소스 객체지향 프로그래밍은 4가지 특징이 있습니다 4가지 특징으로는 추상화, 상속, 캡슐화, 다형성이 있습니다 추상화 사람(person) 에게는 다양한 속성이 있습니다 속성은 변수나(이름,나이,성별등등), 메소드(행동,실행 : 먹는다,잠을 잔다등등)이 될 수 있습니다 여기서 필요한 속성만 간추려 내어 표현하는것을 추상.. 클래스와 인스턴스 자바스크립트에서도 클래스와 인스턴스가 있습니다 프로토타입을 이용한 객체지향 언어의 상속을 구현 할 수 있습니다 문법 ES5 문법에서는 프로토타입을 이용하여 구현 할 수 있고 ES6에서는 class라는 키워드를 통해서 구현 할 수 있습니다 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 일반적으로 클래스이름은 파스칼 케이스를 사용합니다 (첫 글자가 대문자로 시작) 인스턴스 인스턴스를 생성하려면 new 키워드와 클래스를 가리키는 식별자로 선언합니다 ( 변수 = new 클래스이름) 인스턴스의 this는 인스턴스를 가리키게 됩니다 (위의 코드에서 인스턴스 person의 this는 this = Student { name: 'Lee Joong Won' } 입니다) 인스턴스를 생성하고 .. 함수란? 함수란? 함수는 작은 기능의 단위입니다 함수는 함수의 호출과 정의가 있습니다 HTML 삽입 미리보기할 수 없는 소스 function add(x,y)은 함수를 선언(생성)하는것 입니다 add는 함수의 이름이라 부르고 x,y는 파라미터라고 부릅니다 add(1,2)는 함수를 호출을 합니다 1,2는 인수라고 합니다 정리 함수를 호출할땐 함수이름()으로 호출하고 함수에 데이터를 전달할때는 소괄호()안에 데이터를 넣어주고 그 데이터는 인자(매개변수)라고 부릅니다 인수(매개변수가) 함수안에서는 파라미터라고 불립니다 함수를 사용하는 이유 함수를 사용하는 이유는 재사용성 측면에서 매우 유용합니다 반복적으로 실행하는 코드가 있으면 함수로 만들어서 사용하면 코드를 간견하게 작성할 수 있고 추후에 코드를 변경하는등 유지보수에.. 변수와 타입 변수란? 상자를 상자라고 부르기로 약속한것처럼 변수란 데이터에 이름을 붙여서 구분하는데 그 이름을 변수라고 합니다 데이터는 보관함이고(메모리) 각 보관함의 이름이 변수라고 생각하면 편합니다 프로그래밍에서는 이 변수를가지고 데이터를 활용합니다 보관함(저장공간)을 확보하는 방법은 let 과 const와 var가 있습니다 let age; 라고 하면 메모리에(저장공간)에 age라는 이름으로(변수) 메모리를 확보합니다 이과정이 메모리에 데이터를 저장할 공간을 확보한것 이고 이것을 변수 선언이라고 합니다 저장할 공간인 age라는 변수에 데이터 12 를 저장하려면 변수이름 = 데이터를 하면 됩니다 age = 12; 타입 타입에는여러가지가 있습니다 변수 타입을 확인하는 방법으로는 typeof가 있습니다 함수도 타입중 .. 이전 1 2 다음
