본문 바로가기

전체 글

 (122)
React - 생명주기(life cycle) 생명주기(life cycle) 1. class컴포넌트 constructor() : 컴포넌트의 생성자 메소드로, 가장 먼저 실행된다. getDerivedStateFromProps : prop으로 받아온 것을 state에 설정하고 싶을 때 사용한다. render() : 컴포넌트를 렌더링한다. ref componentDidMount() (렌더함수가 실행되고 리액트가 jsx를 돔에 붙이는 순간!) setState/props 바뀜 getDerivedStateFromProps : 컴포넌트의 props나 state가 바뀌었을 때도 해당 메소드를 호출한다. shouldComponentUpdate값이 true (값이 false면, componentWillunmount로 이동.) render() componentDidUp..
React - Styled Components import styled from 'styled-components'; const Button = styled.button` background-color: #ededed; border: none; border-radius: 8px; `; function App() { return ( 안녕 Styled Components! 확인 ); } export default App; css코드로 컴포넌트를 만들고있다. 기존방식의 문제점인 클래스 이름이 겹치는 경우, 의도하지 않은 스타일이 설정될 수 있다. 재사용하는 CSS 코드를 관리하기 어렵다. 을 보완할 수 있는 방식이다. 설치 npm install styled-components 이 글에서는 styled-components 버전5를 기준으로 다룬다. styl..
React - 리액트를 렌더링하는 방식에 대해(CSR, SPA 등) 리액트라우터에서는 a태그대신, Link라는 컴포넌트로 하이퍼링크를 만들었다. 왜 웹브라우저 기본기능이 있는데도 사용하지않고 Link를 사용하는 것이냐면, 우리가 여태 만든 react프로젝트는 Single Page Application이기 때문이다. Single Page Application이란 Single Page : 하나의 HTML문서. application : 어플같이 여러 페이지를 보여주는 사이트. 여러 경로의 HTML문서를 돌아다니며 화면을 보여주는 것이 아니라, 하나의 HTML문서 안에서 자바스크립트를 사용해 여러페이지를 보여준다는 뜻. 렌더링 방식 1. 클라이언트 사이드 렌더링(Client-side Rendering) 클라이언트 : 웹브라우저 렌더링 : HTML페이지를 만드는 것. ∴ 웹브라우..
React - 화면 이동하기(Router, Link, Navigate) React는 모든 것을 component단위로 만들고 코드를 관리한다. 복잡한 페이지를 component로 쪼개로 개발하면 빠르고, 쉽고, 여럿이 동시에 만들 수 있는 장점이 있다. React에서는 이 component단위로 화면을 이동시킬 수 있다. HTML에서는 화면을 이동할 때, 다른 HTML파일로의 이동만이 가능했던 점이 다르다. React Router v6 npm install react-router-dom@6 React Component로 페이지를 나누고, 이동할 수 있게 해주는 라이브러리이다. 위 명령어로 설치한다. 위와같이 컴포넌트단위로 페이지를 나눈다. 홈페이지 수업탐색 커뮤니티 그리고 이렇게 페이지를 이동시킬 수 있다. React Router의 핵심 컴포넌트 1. Router React..
React - 배열을 렌더링시 key를 써야 하는 이유 key를 사용하지 않은 경우 처음 배열 : ['강아지', '고양이', '햄스터'] 바뀐 배열 : ['강아지', '햄스터'] 처음 배열을 렌더링 후, 바뀐배열로 데이터가 바뀌었다면, react는 해당 배열에서 두 번째 요소가 삭제된것인지? 세 번째 요소가 삭제되고, 두 번째 요소가 '햄스터'로 바뀐것인지? 등의 많은 경우 중 하나로 특정할 수 없다. key를 사용한 경우 처음 배열 : [{key:1, name:'강아지'}, {key:2, name:'고양이'}, {key:3, '햄스터'}] 바뀐 배열 : [{key:1, name:'강아지'}, {key:3, '햄스터'}] key값을 통해, 1과 3은 그대로 존재하고, 2가 삭제되었다는 것을 알 수 있다. 코드로 확인해보기 import React from 'r..
React - Virtual DOM HTML의 Dom Tree를 추상화한 것. React는 state가 변경되면 새로 렌더링을 하는데, 실제 Dom Tree에 데이터를 렌더링 하기전에 먼저 virtual dom에 렌더링을 한 이후 변경된 부분을 확인하고 그 부분만 새로 교체하여 렌더링하기때문에 효율적이다. React만 가지고 있는 것은 아니고, React와 비슷한 언어들은 대부분 가지고있다고한다. 하지만 모던 브라우저(크롬, 사파리 등) 들은 DOM이 노드를 사용하지 않고 자바스크립트와 동일한 메모리모델을 쓰기때문에, 리엑트와 동일하게 바뀐것이 없다면 추가작업을 하지 않기때문에 더이상 큰 성능문제는 없다고한다. dom과 virtual dom의 차이 Dom Document Object Model 브라우저의 렌더링 엔진에 의해 HTML문서를 ..
React - 데이터 다루기 1. mock data 사용해보기 mock은 흉내낸다는 의미라고함. 데이터를 흉내낸 가짜 데이터라고 보면되겠다. map으로 데이터 렌더링하기 컴포넌트의 return문안에서 map메서드를 사용하여 jsx를 리턴하면, jsx를 여러개 추가한 것 처럼 동작한다. function ReviewList({ items }) { return ( {items.map((item) => ( ))} ); } 위와 같이 컴포넌트가 return하는 jsx안에 {}중괄호를 넣어서 items.map을 실행한다. {items.map((item) => ( ))} 위 코드는 원래 아래와 같이 작성하려했는데, esLint오류라고 난리쳐서 바꿨다. esLint에 의하면, 객체를 반환하는경우(???) arrowFunction을 사용할 경우 중..
React - 컴포넌트에 스타일 입히기 인라인 스타일 const style = { backgroundColor: 'pink' } function Button({children, onClick}){ return {children} ; } function Button({children, onClick}){ return {children} ; } 스타일의 속성값은 객체로 입력해야한다. 객체의 key에 '-'가 들어있는 이름은 전부 카멜케이스로 바꿔 적어주어야한다. 스타일 객체를 따로 빼지 않고, 위 예제중 2번째 코드처럼 직접 적어도 되지만 권장되지 않는다. css 파일 import //index.css body{ background-color: #191f2c; color: #fff; } // index.js import ReactDOM from ..

티스토리툴바