반응형 리액트 (React)24 State 관리 - 클래스형 컴포넌트 (setState) 단방향 데이터 흐름의 중요성 - 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다. - 라이프 사이클과 연관지어 생각해보면, 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. - 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해보자. - 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되면서, 또 다시 자식 컴포넌트가 리렌더링 된다. - 무한루프에 빠지게 된다. 클래스형 컴포넌트에서 state 관리 - setState() 사용 - 아래 네모 예제를 통해 관리하는법을 보자. Count 숫자만큼 네모칸을 화면에 띄우기 1. state에 count라는 변수를 추가하고, count 숫자만큼 네모칸을 화면에 띄우기 impo.. 2021. 9. 1. 리액트에서 돔요소를 가져오기 React.createRef() - 어떤 인풋박스에서 텍스트를 가져오고 싶으면 어떻게 접근해야하나? - 리액트 요소에서 가져온다. class App extends React.Component { constructor(props) { super(props); // App 컴포넌트의 state를 정의해줍니다. this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"], }; // ref는 이렇게 선언합니다! this.text = React.createRef(); } componentDidMount(){ // 콘솔에서 확인해보자! console.log(this.text); console.log(this.text.current); } // 랜더 함수 안에 리액트 엘리먼트를 넣어.. 2021. 9. 1. React - 라이프사이클 & 라이프사이클 함수 라이프사이클 - 컴포넌트의 라이프 사이클은 정말 중요한 개념이다. - 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다. State and Lifecycle – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트 생성 → 수정(업데이트) → 제거 생성은 처음으로 컴포넌트를 불러오는 단계 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때) 또는, 강제로 업데이트 했을 경우 (forceUpdate()를 통해 강제로 컴포넌트.. 2021. 9. 1. 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. 이전 1 2 3 4 다음 반응형
