무념상

리액트(7)

리액트 = 사용자 인터페이스를 구축하는 자바스크립트 라이브러리 리액트 = 컴포넌트가 전부 컴포넌트 = 스타일을 만드는 Html 코드와 CSS 코드 그리고 어떤 로직을 위한 자바스크립트의 결합 : 각각의 빌딩 블럭 리액트 장점1 = 재사용 가능(반복을 피함) 리액트 장점2= 코드베이스를 작고 관리 가능한 단위로 유지 가능 (하나의 명확한 과제와 초점에 대해 집중 가능 ) ------------------------------------------ 본격 실습 ---------------------------------------------------------- * 리액트 코드 = 결국 자바스크립 코드 * index.js = 가장 먼저 실행되는 파일 * npm start 프로세스 - 개발자 서버 가동하고 코..

리액트(6)

배열 관련 내장함수 : map (여러개의 데이터를 한 번에 다른 형태로 변환하기 위해서 사용) const numbers = [1, 2, 3]; 문법 : const doubleNumberArray = numbers.map( (num) => { 배열의 원소인 숫자 1,2,3에서 각 실행됨 매개변수(이름 원하는 대로) returm num * 2; }); console.log(numbers); //[ 1, 2, 3 ] console.log(doubleNumArray); // [2, 4, 6] 자바스크립트 요약 1. 화살표 함수 - 문법 : const 무념상 = () => { console.log('코딩천재'); } - 생략 1. 정확한 argument 가 있는 경우 괄호 생략 const callMe = name..

리액트(5)

*스프레드와 다른점 = 스프레드 : 모든 원소와 프로퍼티 가져와서 새 배열이나 객체 또는 우리가사용하는 어떤 것에 전달. = 디스트럭쳐링 : 원소나 프로퍼티 하나만 가져와서 변수에 저장. * 배열 디스트럭쳐링 마치 새 배열 생성하는 모양새이지만 변수 a와 b에 Hello 와 Max 각각 할당 ex) const numbers =[1,2,3]; [num1, , num3] = numbers; console.log(num1,num3); // 1,3 * 객체 디스트럭쳐링 배열을 디스트럭쳐링 해서 가져올 프로퍼티 순서 정하는 곳에 → 중괄호 사용 왼쪽에 {name} 넣고 오른쪽 객체의 name 프로퍼티를 대..

리액트(4)

자바스크립트는 기본형과 참조형으로 나뉨. - 기본형 : const number = 1; - 참조형 :const num2 = number; ( 값 1을 num2에 복사) ( 참조형에는 객체와 배열이 있음.) - 또 다른 예시 const person = { name: 'Max' }; const secondPerson = person; console.log(secondPerson); // 'Max' 객체 person 은 메모리에 저장 상수 person 에는 메모리에 있는 주소를 가리키는 포인터를 저장 person 을 seconPerson 에 할당하면 포인터가 복사될 것 -------------------------------------------------------- 만약 복사된 것을 가진 다음에 perso..

리액트(3)