React (11) 썸네일형 리스트형 TIL no.57 - React 성능 최적화를 고려한 컴포넌트 만들기 React 의 성능을 생각하며 코드를 짜기 이전에 알아야 할 리액트의 특성에 대해 간단하게 정리했습니다. React , 이 친구는 React 는 생명주기 즉, Lifecycle 을 가지고 있습니다. 컴포넌트가 실행되거나 업데이트될 때, 또는 제거될 때 사이클에 따라서 특정 이벤트가 발생합니다. 컴포넌트가 처음 실행될 때 mount 되었다고 말합니다. 그 이후에 props 또는 state 값이 변경되면 update 가 발생합니다. 컴포넌트가 dom 상에서 제거될 때 실행할 함수를 mount 해제 부분에 작성합니다. 리액트의 클래스형 컴포넌트를 사용했을 때는, 이러한 상황별로 componentWillMount componentDidMount shouldComponentUpdate componentWillUp.. TIL no.41 - React 에서 특정 Dom 에 접근하기 : useRef, ref 우리가 특정 Dom 을 선택하기 위해 javascript에서는 getElementId, querySelector 같은 selector 함수를 사용해서 선택할 수 있었습니다. 그렇다면 React에서는 어떻게 Dom에 접근할 수 있을까요? 사실 왜 접근해야 하는지 필요성을 느끼기 전까지는 알고 있어도 익숙해지지가 않습니다. 저는 이번에 react native를 사용하면서 라이브러리를 많이 접해봤는데 라이브러리에서 useRef가 많이 사용되어서 어찌저찌 사용은 했지만, 더 개념적으로 이해하고 싶어서 정리하게 되었습니다. React에서는 ref라는 것을 이용해 dom에 접근할 수 있는데 함수형 컴포넌트에서는 useRef 라는 Hook 함수를 사용합니다. 저는 함수형 컴포넌트를 예로 작성하도록 하겠습니다. 리액트.. TIL no.40 - * generator 이해하기 : redux-saga를 위한 * generator 는 ES6에서 등장한 개념으로 함수의 실행을 중간에 멈추고 재개할 수 있게 하는 기능입니다. 실행을 멈출 때 값을 전달할 수 있기 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용할 수 있습니다. generator 생성 - 제너레이터는 * 와 함께 정의된 함수가 반환하는 객체입니다. - yield 와의 사용을 주로 볼 수 있는데 yield를 사용하면 함수의 실행을 break와 같은 기능으로 멈출 수 있습니다. yield의 사용으로 return을 여러 번 할 수 있습니다. function* GeneratorFunction() { yield 1; yield 2; yield 3; } const Generator = GeneratorFunctuin(); console.log(.. TIL no.36 - React Hooks useEffect 의존성 배열 ?! 의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수입니다. 의존성 배열의 내용이 변경되었을 경우 부수 효과 함수가 실행됩니다. 의존성 배열을 사용하지 않고 아래와 같은 함수를 실행한다면, useEffect(() => { fetch(API_BOOK) .then((res) => res.json()) .then((res) => setBooks(res.MESSAGE)); }); 페이지가 렌더링 될 때마다 데이터를 불러오기 때문에 매애애우 비효율적입니다. 저번에 의존성배열을 지워볼까? 하고 지워봤다가 백엔드분이 뭔가 잘못된거같다고 데이터를 자꾸 불러온다 그래서 얼른 의존성 배열을 다시 적어줬던 기억이 있습니다.. ㅎㅎ 그래서 부수 함수효과에서 API를 호출하는 경우, 의존성 배열에 넣어주면 배열안의 .. TIL no.35 - 더보기 버튼 만들기 ellipsis 긴 글을 감추는 모양인 ...과 함께 나오게 하기 위해서 아래와 같은 코드를 사용하면 됩니다 ! p.close 에서는 숨겨져 있도록 하고 p에서는 원래의 글이 다 보이도록 height를 100% 주었습니다. overflow : 넘치는 부분은 hidden 으로 가리고 text-overflow: ellipsis 는 ...을 표현해줍니다. display: -webkit-box 로 하고 -webkit-line-clamp 은 나오게 하고 싶은 줄의 수만큼 표시합니다. 위와 같이 className 이 바뀌게 하기 위해서 onClick 이벤트를 주었습니다. TIL no.34 - How to fetch api in React Hooks? useEffect 는 setState 에서 state를 업데이트 해왔듯이 useEffect로 특정한 변화에서만 업데이트 시키도록 하는 것입니다. useEffect(() => { fetch("/data/BookDetails/data.json") .then((res) => res.json()) .then((res) => setData(res.MESSAGE)); }, []); 이와 같은 코드로 class 형 component와 같은 결과를 보일 수 있습니다. useEffect 는 여러가지 라이프 사이클이 합쳐진 형태로 설명할 수 있습니다. componentDIdMount (의존형 배열 : []) shouldComponentUpdate (의존성 배열 내에 해당 사항 없을 경우) componentDidUpdate.. TIL no.33 - Styled Components : React SASS 가 익숙해질 때 쯤 새로운 기술을 배워줘야 배움이 가중되는 법이죠. 처음 배울 때는 왜 이걸 배워야 하나 그냥 하던 거 하고 싶다는 생각이 더 들었는데 쓰다보니까 역시 처음은 뭐든지 어렵고 최근 기술은 편리합니다. Styled Components를 사용해야 하는 이유 🌟클래스 명을 겹치지 않게 하기 위해서 🌟 funtional Component 와 함께 사용하며 동적인 변화를 표현할 수 있기 때문에 🌟 npm 다운로드 수 기준으로 현재 가장 인기 있는 css-in-js 로 사용자가 많기 때문 npm install --save styled-components import styled from 'styled-components' function HelloWorld() { render( Hello W.. TIL no.28 - 부모-자식 간 Lifecycle & 조건부 렌더링 : React 처음 React를 배울 때 Lifecycle 에 대해서 배웠었는데 그 때는 그다지 중요하지 않다고 생각했는데 Lifecycle 로 인한 에러를 자주 만나게 되었습니다 ㅠㅠ 그래서 지금 Lifecycle에 대해 정리해두려고 합니다 ! Lifecycle 순서 1. constructor 2. render 3. componentDidMount 4. (fetch 완료) 5. render 6. (setState) 이전 1 2 다음
