React (20) 썸네일형 리스트형 [React] props를 왜 순수 함수처럼 사용해야할까? 순수 함수는 함수형 프로그래밍에서 쓰이는 개념이다. 함수 내부에서 사용되는 값들이 외부의 영향을 주지 않고 어떠한 Input을 전달해도 똑같은 상태(타입)로 output을 반환해주는 기능을 하는 함수를 순수 함수라고 한다. 순수 함수의 조건 동일한 Parameter을 받으면 항상 똑같은 값을 Output 한다. retrun 값으로만 다른 외부 코드와 소통한다. 함수 외부에 영향을 끼치면 안된다. 예제 순수함수 : const add = (a, b) => { return a + b; } 위 코드와 같은 경우가 순수 함수라고 할 수 있다. 들어온 Input의 상태를 그대로 가져갔고 외부의 어떠한 영향도 끼치지 않았다. 그렇다면 어떤 것이 순수 함수가 아닌가? 순수 함수가 아닌 예시 1 : let c = 10;.. [React] 최적화 훅 useMemo, useCallback React는 state가 변경되면 리렌더링을 한다. 다시말해 Virtual DOM과 DOM을 비교하여 변경된 부분을 반영하고 다시 렌더링 해주는 과정을 거친다. 이러한 과정에서 비효율적인 문제가 존재한다. 무조건 state가 변경되면 변경된 state와 무관한 컴포넌트의 구성요소가 리렌더링이 된다는 것이다. 이렇게 되면 불필요한 연산을 하는 것은 물론이고 연산을 다시하는 과정을 거쳐서 결과적으로 성능 저하로 좋지 않은 사용자 경험을 제공한다. 그걸 극복하기 위해서 나온 훅들이 useMemo와 useCallback이다. useMemo const Example = () => { const [textInput, setTextInput] = useState(''); const [count, setCount] =.. [React] state와 props에 차이점. 리액트에서 흔히 쓰이는 state와 props 둘의 사용법은 대략 비슷하다. 하지만 분명 차이점이 있고 사용방법도 차이가 있다. State import React, { useState } from 'react'; function Example() { // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } props function Welcome(props) { return Hello, {props.name}; } Props - 읽기 전용(변할 수 없다.) - 부모 요소(컴포넌트)에서 선언되어야 하며 변경도 부모요소(.. [React] 고차 컴포넌트 고차 컴포넌트 (HOC, higher-order component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이다. 고차 컴포넌트는 그 자체로는 React API가 아니다. 고차 컴포넌트는 React의 컴포넌트적 성격에서 나타나는 패턴이다. 구체적으로 고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수이다. 컴포넌트가 UI를 props로 변환하는 반면, 고차 컴포넌트는 컴포넌트를 다른 컴포넌트로 변환한다. 다시 말해서 컴포넌트들의 부모가 되는 컴포넌트이다. 아래 컴포넌드처럼 props를 반환하여 리덕스를 보다 효율적이게 사용할 수 있다. /* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect } f.. [React] Virtual Dom 이란 Virtual Dom Virtual Dom = Virtual(가상) + Dom(Document Object Model, 문서 객체 모델)이다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이고, 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다. Dom 이란? DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 그렇다면 여기서 말하는 문서 객체란 무엇일까? 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. 가상돔이 나오게 된 이유 어떠한 태그의 속성이나 값을 변경하려고 할때 DOM에 접근하는 자바스크립트.. [React] props로 부모 컴포넌트에 state를 사용해보자 App이라는 컴포넌트안에 예를들어 이라는 컴포넌트를 만들었다고 가정하자. (이걸 용어로 부모 자식관계라고 합니다. App은 부모 컴포넌트고 Modal은 자식 컴포넌트이다.) 근데 자식 컴포넌트가 부모 컴포넌트 안에 있던 state를 갖다 쓰고싶을 때가 가끔 있다. 그럴 땐 대충 { 부모에 있던 state이름 } 이렇게 쓰면 안되고 props라는 문법으로 state를 전송한 뒤에 { props.state이름 } 이런식으로 사용해야한다. 뭔소린지 알아보자. props를 알기쉽게 그림으로 표현하자면 저번시간에 컴포넌트라는걸 쓸 수 있다고 배워보았다. 컴포넌트안에 컴포넌트를 집어넣어서 사용할 수 있고. 그럴 때 안에 들어간 컴포넌트를 자식컴포넌트라고 부른다. ▲ 우리가 지금까지 만들었던 사이트를 그림으로 표현하.. [React] map함수를 이용해 반복되는 JSX 줄이기 자바스크립트 map 함수 쓰는 법 JSX 중간중간 중괄호 열고 { 변수명 } 넣어 사용하였다. 그럼 반복문도 중괄호 안에서 { for (){} } 이렇게 집어넣을 수 있지 않을까라고 생각할 수 있지만 {} 중괄호안에는 변수, 함수 형태만 입력 가능하다. 그래서 중괄호 안에서 쓸 수 있는 map 이라는 반복문을 이용한다. 반복문은 아니고 array에 붙일 수 있는 일종의 내장 함수이다. array 자료형이 하나 있다고 치자. array 안의 모든 자료에 똑같은 작업을 하나씩 시켜주고 싶을 때가 가끔 있다. 그럴 때 쓰는 문법이 바로 map 이라는 내장 함수이다. let 어레이 = [2,3,4]; 어레이.map(function(a){ return a * 10 }); 콜백 함수 소괄호 안에 파라미터를 아무 이.. [React] Component(컴포넌트) 사용해보자 복잡한 HTML들을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. Component라고 한다. 이걸 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 삽입할 수 있다. function App (){ return ( HTML 잔뜩있는 곳 ... ) } function Modal(){ return ( 제목 날짜 상세내용 ) } 위 코드에서 Modal 함수가 Component(컴포넌트)이다. 위 코드처럼 하면 원하는 HTML을 한 단어로 줄일 수 있다. 줄이는 법은 1. function을 이용해서 함수를 하나 만들어주고 2. 그 함수 안에 return () 안에 원하는 HTML을 담으시.. 이전 1 2 3 다음
