반응형 분류 전체보기266 React - Virtual Dom & 라이프사이클 Dom - DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. - 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있다. - 이런 구조를 트리 구조라고 한다. -> DOM은 트리구조. - DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다. → 필요없는 연산이 너무 많이 일어난다. → 이를 보완하기 위한것이 가상돔이다. Virtual Dom - 가상돔은 메모리 상에서 돌아가는 가짜 DOM. - 가상돔의 동작 방식 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교 바뀐 부분만 변경 돔 업데이트 - 어떤 행동을 해야 DOM을 새로 그릴까? 처음 페이지 진입했을 때 데이터가 .. 2021. 9. 1. React Styled-components Styled-componets 란? - class 이름 짓기에서 해방 - 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적 - CSS-in-JS 라이브러리 중 하나 - 컴포넌트에 스타일을 직접 입히는 방식이라고 생각해도 됨. - 문법은 css오 ㅏ 같다. Styled-components 설치 yarn add styled-components Styled-components 적용 import React from 'react'; // 패키지에서 styled를 불러온다. import styled from 'styled-components'; function App() { return ( hello React! ); } // scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있다. const MyStyled = s.. 2021. 8. 31. SCSS 사용하기 SCSS란? - SCSS는 SASS의 3번째 버전에서 추가됨. - SASS의 모든 기능을 쓸 수 있고 CSS와 호환도 잘 되는 버전. SCSS 사용법 yarn add node-sass@4.14.1 open-color sass-loader classnames - 새로운 패키지를 설치하였다면, 리액트를 다시 시작해주자. SCSS 문법 Nesting - div 아래에 p, img 태그 스타일을 줄 때, 각각 다른 블럭을 만들어 쓸 필요가 없다. - 축약형으로 묶을 수 있다. → xxx-yyy 식일 때, 앞에 xxx가 같은 친구끼리 묶어 쓸 수 있다. //scss div { p { color: #888888; font: { family:sans-serif; size: 14px; } } img { width: 4.. 2021. 8. 31. Component에 CSS 파일 적용하기 Component에 CSS 파일 적용하기 App.js import React from 'react'; import logo from './logo.svg'; import BucketList from './BucketList'; import './style.css'; class App extends React.Component { constructor(props){ super(props); this.state = { list: ['영화관 가기', '매일 책읽기', '수영 배우기'], }; } render() { console.log(this.state); return ( 내 버킷리스트 {/* 컴포넌트를 넣어줌. */} {/* */} ); } } export default App; - css 파일을 impo.. 2021. 8. 31. Component - 클래스형 & state 넘겨주기 클래스형 App.js 기본 코드 // App component를 class형으로! import React from 'react'; class App extends React.Component { constructor(props){ super(props); this.state = {} } componentDidMount(){ } render(){ return ( ); } } export default App; 클래스형 BucketList App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; import BucketList from './BucketList'; // 클래스형 컴포넌트는 이렇게 생겼습니다! cla.. 2021. 8. 30. Component - 함수형 함수형 Component 는 두가지 형태로 사용할 수 있다. BucketList.js import React from 'react'; function Bucketlist(props){ return ( 버킷 리스트 ); } const BucketList = (props) => { return ( 버킷 리스트 ); } - return : 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환 - =>가 들어간 함수를 화살표 함수라고 불러요. - ( ) 안에 props : 부모 컴포넌트에게 받아온 데이터 - js 함수가 값을 받아오는 것과 똑같이 받아온다. export default BucketList; - 우리가 만든 함수형 컴포넌트를 export 해준다. - export 해주면 다른 컴포넌트에서 Bucket.. 2021. 8. 30. 이전 1 ··· 6 7 8 9 10 11 12 ··· 45 다음 반응형
