본문 바로가기

✏️/React

(13)

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 : 여러가지 파..

이전 1 2 다음

티스토리툴바