본문 바로가기

✏️

(36)

React 공부하기(2) - styled-components 🎉 벨로퍼트와 함께하는 모던 리액트 CSS in JS $ yarn add styled-components import styled from 'styled-components' [polished의 스타일 관련 유틸 함수 사용하기] lighten() darken() $ yarn add polished import { darken, lighten } from 'polished'; import React from 'react'; import styled from 'styled-components'; import { darken, lighten } from 'polished'; const StyledButton = styled.button` /* 공통 스타일 */ display: inline-flex; outli..

React 공부하기(1) - Hooks 종류편 🌹 벨로퍼트와 함께하는 모던 리액트 ~ for 성능 최적화 ~ useMemo : 연산한 값 재사용 useCallback : 함수 재사용 React.memo : 컴포넌트 리렌더링 방지 7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기 import React, { useState } from 'react'; const [number, setNumber] = useState(0); 상태의 기본값을 파라미터로 넣어서 호출 호출하면 배열이 반환, 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수 11. useRef로 특정 DOM 선택하기 import React, { useRef } from 'react'; const nameInput = useRef(); ... nameInput.current..

React 공부하기(1) - 상태관리 中 배열편 🔥 벨로퍼트와 함께하는 모던 리액트 불변성 !!!! push, splice XXX concat, filter, map OOO 11. 배열 렌더링하기 map() : 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어 줌 각 원소들마다 고유한 key 값을 설정해줘야 됨 => 그래야지, 수정되지 않는 기존값은 그대로 두고 원하는 곳에 내용을 삽입하고 삭제함 import React from 'react'; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.c..

React 공부하기(1) - 상태관리편 🍇 벨로퍼트와 함께하는 모던 리액트 아래에 기능들은 모두 React Hooks중 하나 on이벤트이름={실행하고싶은함수} 7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } export default Counter; (자세히 보기) 이렇게 하면, 렌더링되는 시점에서 함수가 호출되버림..

React 공부하기(1) - 기본편 🌈 벨로퍼트와 함께하는 모던 리액트 01. 리액트는 어쩌다 만들어졌을까? Javascript는 어떤 상태가 바뀌면, 그 상태와 연결된(getElementById) DOM을 변경! React는 어떤 상태가 바뀌면, 아예 전부 다 날려버리고 새로운 DOM을 보여줌! => 어떻게 업데이트 해야되지.. 고민할 필요 없어짐 개발이 쉬어졌다 => 근데 느리지 않아? => virtual DOM을 사용해서 변경이 된 부분과 안 된 부분을 비교해서 변경된 것만 실제 DOM에 적용 => 그래서 결론은 빠르다! 02. 작업환경 준비 Node.js : for Webpack, Babel Yarn : npm(node.js package manager) 상위버전 코드 에디터 : VSC Git bash Webpack : 여러가지 파..

[JavaScript] HTML에 JS 연결하는 방법 비교 / async VS defer 차이점 🔽 HTML 파싱에 대해서는 아래 포스트를 참고해주세요 🔽[HTTP] 브라우저 렌더링 과정🔗 Browser Rendering(브라우저 렌더링)이란? 사용자의 요청을 서버에 전달하고 그 결과를 화면에 나타내는 과정을 의미한다. 🔗 Parsing(파싱)이란? 브라우저가 코드를 이해하고 사용할 수 있는 devjindev.tistory.com 1. head 안에 불러오는 경우 ⭐☆☆☆ 123456789 ... ... cs JS를 불러오는 동안 HTML 파싱을 멈추고, JS 다 불러오면 나머지 파싱을 진행하기 때문에 사용자에게 페이지가 보여지는 시간이 딜레이된다. 2. body 안(맨 끝)에 불러오는 경우 ⭐⭐☆☆ 123456789 ... ... cs 먼저 HTML을 모두 파싱하여 사용자에게 페이지가 보여진 후,..

[JavaScript / ES6] ES6 문법 정리 🔗 const, let 📌 var VS const, let var은 함수 스코프이다. const, let은 블록 스코프이다. 따라서 {블록} 밖에서 변수에 접근할 수 없다. 📌 const VS let let은 변수에 재할당이 가능하다. 따라서 다른 값을 대입해야 하는 상황이 생겼을 때 사용한다. const는 변수에 한 번 대입하면 다른 값을 대입할 수 없다. 보통 기본적으로 사용한다. 🔗 템플릿 문자열 1 2 3 4 5 6 7 const num1 = 1; const num2 = 2; const result = 3; const string1 = num1 + '+' + num2 + '=' + result; // 기존 방식 const string2 = `${num1}+${num2}=${result}` // E..

[JavaScript] 자료형 (Data Type) / 종류, 형변환, typeof 🔗 자료형(Data Type) 종류 숫자형 (Number) : 10진수, 16진수, 실수 모두 해당 문자형 (String) 논리형 (Boolean) : true(참) / false(거짓) undefined : 미정의된 자료형 null : 아무것도 참조하지 않은 자료형 📌 undefined VS null 차이점 공통점 : "값이 없다." undefined 데이터 타입 초기화 되지 않은 기본 초기값 상태 ex) var data1; null 오브젝트(객체) 타입 객체를 담기위한 변수를 초기화 하는 상태 ex) var data = null; (🤷‍♀️) undefined 보다 null 대상 변수가 더 큰 범위인 느낌 🔗 자료형 확인하기 typeof(변수); 🔗 자료형 형변환 문자형 -> 숫자형 Number(변수..

이전 1 2 3 4 5 다음

티스토리툴바