ijooha 님의 블로그

[react/공부] Hook이 뭐야?

Hook 알아보기추가로 보면 좋을 링크        Hook? Hook을 사용하면 컴포넌트에서 더 많은 react 기능을 사용할 수 있다.react hook은 정말 다양한데, 가장 중요하고 많이 사용하는 두가지 (state hook, effect hook)을 알아보겠다.         State Hook 전 게시글에서 얘기한 바 있는 그 state가 맞다.State를 통해 컴포넌트는 사용자의 입력과 같은 정보를 기억할 수 있다.전 게시글에서 소개한 사이트의 경우 나라명과 메달 개수를 기억하도록 했다.const ['상태 값', '상태를 변화시키는 함수'] = useState('초기값')상태를 변화시키는 함수를 통해 변하는 값을 계속 저장하고, 상태값으로 이를 렌더 등으로 사용한다.         Effec..

React 시작하기react 공식 페이지         React? 리액트는 작업을 더 효율적으로 하기 위해 만들어진 라이브러리인데,큰 특징이 하나 있다. 변경사항이 생기면 웹 전체를 다시 구축하는 대신가상 DOM과 컴포넌트, state를 통해 변경된 부분만 업데이트 한다. 가상 DOM은 실제 DOM의 가벼운 사본으로, 변경된 부분만 찾아서 실제 DOM에 반영하기 때문에,렌더링 성능을 최적화할 수 있다.         React 시작하기 ** 노드가 설치된 상태여야 함먼저 프로젝트를 생성해준다.그냥 리액트, 그리고 vite 두가지 방식이 있는데 후자가 훨씬 효율적이므로 그것만 정리하겠다. 터미널을 연 후yarn create vite --template react꺽쇠 없이 프로젝트명을 적어주면 된다. 후..

연산자 활용하기         Falsy 활용하는 방법을 알아보기 전에, 연산자에서 가장 중요한 falsy를 먼저 알아보자.0'' (빈 문자열)nullundefinedNaNfalsy에는 위 다섯가지 종류가 있다.저 값을 칠 경우 거짓으로 나온다.  그럼 이제 네가지 연산자를 활용하는 법을 알아보겠다.       || or 이라는 의미의 연산자이다.평소 조건문에서 두가지 조건 중 하나를 충족할 때 로직을 진행하는 식으로 종종 사용했다. 하지만 더 나아가return result || 'no result'이런식으로도 사용할 수 있다!왼쪽 값이 거짓이면(없으면), 오른쪽 값을 내보내줘!         ?? 이건 처음보는 연산자였다.||와 사용법이 비슷하다.return result ?? 'no result'하지만..

this 알아보기         전역환경 this • Borwser(크롬)에서의 this는 window• Node에서의 this는 global         Method에서의 this • method는 항상 누군가 호출해 줘야 하기 때문에• this는 호출의 주체예를들어let obj = { methodA : function() { console.log(this); }, inner : { methodB : function() { console.log(this); } }};이런 객체가 있다고 했을 때, thisobj.methodA();obj 를 참조obj.inner.methodB()obj.inner 참조 화살표 함수의 경우, 상..

복사 알아보기         복사? 객체는 값 자체가 아니라 값의 주소를 통해 데이터를 전달한다.그래서 객체를 단순히 복사하면, 복사한 객체와 원본 객체가 같은 메모리 주소를 참조하게 되어,하나를 변경하면 두 객체가 모두 변경되는 오류가 발생한다.이를 방지하기 위해 깊은 복사(deep copy)와 얕은 복사(shallow copy)라는 개념이 존재한다.얕은 복사는 대상의 1단계 속성만 복사하는 반면,깊은 복사는 대상을 완전히 복사하여 중첩된 객체나 배열까지도 새로운 메모리 주소를 갖도록 복사한다        얕은 복사(shallow copy) • 1단계 속성만 복사const shallowCopy = function(target) { let result = {}; for (let prop in targ..

데이터타입(Data Type) 알아보기         원시 타입 01 숫자형(Number)정수와 소수를 모두 포함2^53-1보다 큰 수는 Bigint  02 문자형(String)"string"'string'`string`다 같지만 백틱(`)의 경우• 줄바꿈이 가능하다• ${}로 다른 변수 사용 가능  03 불리언(Boolean)조건을 표현하는 자료구조truefalse  04 Null널.. 이라고 읽는다..값이 없는 것 (빈 공간)undefined (공간 자체가 없음)          참조 타입 별도의 공간에 원본 데이터를 저장,변수에 데이터의 주소를 저장.주소가 메인이기 때문에let a = [1];let b = [1];a === b //false 같은 값이 들어있는 배열이어도 다른 배열, 혹은 객체이다...

변수 알아보기         변수(Variable 데이터를 저장하고 참조할 수 있는 이름과 주소를 가진 저장소변수 선언 (이 저장소 쓸게) //var a;할당 (이 저장소에 이거 담을게) //a = 1;  01 var**최대한 사용 지양하기**함수 스코프를 가지며, 재선언과 재할당이 가능하다.var x = 10;var x = 20; //재선언 가능x = 30; //재할당 가능TDZ (temporarily dead zone)let x; 이렇게 호이스팅 안되고 에러 뜸but var x; 는 그대로 undefined 로 뜸  02 let재선언 불가능재할당 가능let a = 0;let a = 2; //재선언 불가능a = 1; //재할당 가능  03 const재선언 불가능재할당 불가능const a = 0;con..

화살표 함수와  this, 그리고 호이스팅 알아보기         화살표 함수? function () {}() => {}위가 전통적 함수 표기법, 아래가 화살표 함수다.화살표 함수가 훨씬 간결해서 저것만 쓰면 안되나? 싶어서 찾아보니,동작 방식에서 차이가 있었다.  01 this 바인딩의 차이this 란, 함수나 메서드 내에서 객체를 참조하는 키워드다. (다음 목차에서 더 설명)function에서는 this가 동적으로 결정된다. 즉 아래와 같이 사용이 가능하다.const obj = { value: 10, example: function () { console.log(this.value); //this는 obj를 가리킴 -> 출력: 10 },};하지만 화살표 함수에서는 상위 컨텍스트의 this를 상..

html, css, javascript 연결하기         HTML → CSS html에서 써준 코드를 css에서 꾸며주기 위해 필요한 선택자*모든 태그를 선택tag #id .class li ali 안에 있는 ali + ali 바로 뒤에 오는 a (같은 계층)li > a한 계층 아래 ainput [type=""]속성 선택li.class같은 요소의 클라스들:hover :active :checkedinput[type="radio"]:checked:nth-of-type(n)n번째 요소에 적용(반복):last-child :nth-child :nth-last-child ::first-letter ::first-line ::selection드래그 했을 때         HTML → JavaScript 다음..

sticky 알아보기         sticky란? 스크롤을 내렸을 때 화면 위에 딱 달라붙어 사라지지 않는 position값이다.position의 값에는 sticky 외에도 fixed, relative, absolute, static 등이 있다. 언제 사용할까?네비게이션이나 목차, 버튼을 화면에 고정시키고 싶을 때 사용한다.         sticky를 사용하기 위한 기본 CSS css 파일에서 고정시키고 싶은 요소에 아래와 같이 작성하면 된다.position: sticky;top: 0; //고정시키고 싶은 위치 지정          sticky를 사용하기 위한 조건 sticky가 작동하려면 아래 몇가지 조건이 만족되어야 한다. 01 부모 요소의 길이sticky가 작동하기 위해서는, 부모요소의 길이가 ..