코딩하는라민

[React] Hooks - Context API 📌 context 를 사용하는 이유 리액트에서는 데이터가 위에서 아래로 props를 통해 전달된다. 즉, 단반향 하향식 데이터 흐름이다. 여러 컴포넌트에 props 을 전해줘야하는 경우 굉장히 번거로워진다. props 를 하위 컴포넌트에 전달해줄 때 트리 단계마다 명시적으로 props 을 넘겨줘야하는데, context 를 이용하면 하위 컴포넌트들에 연쇄적으로 props 를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 📌 context 를 언제 사용하는가 Header Container Nav 상위 컴포넌트 Header 부터 최하위 컴포넌트 Nav 가 있다고 해보자. Container 에는 props 를 전달하지 않고 Nav 에만 절달하고..

[React] Hooks - useEffect ( ) 📌 클래스형 컴포넌트의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 [React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 종료되는 것을 나타내기 위해 사용하는 용어를 가리킨다. 즉 라이프사이클은 컴포넌트가 브라우저상에 렌 ramincoding.tistory.com Mount Update Unmount ComponentDidMount ComponentDidUPdate ComponentWillUnmount 컴포넌트가 태어나는 순간 mount 되는 순간에 사용할 수 있는 메서드 컴포넌트가 변화하는 순간에 사용할 수 있는 메서드 컴포넌트가 화면에서 사라지기..

[React] 라이프사이클(LifeCycle) - React 의 생명주기 📌 LifeCycle 어떤 프로그램이 실행되고 종료되는 것을 나타내기 위해 사용하는 용어를 가리킨다. 즉 라이프사이클은 컴포넌트가 브라우저상에 렌더링되고, 업데이트 되고, 사라지는 과정을 말한다. 탄생 : 컴포넌트가 화면에 나타나는 순간 (Mount) → ex) 초기화 작업 변화 : state가 리렌더되는 과정 (Update) → ex) 예외 처리 작업 죽음 : 컴포넌트가 화면에서 사라지는 과정 (UnMount) → ex) 메모리 정리 작업 📌 컴포넌트에서 lifecycle 을 제어한다는 것은 무슨 의미일까? ✅ 클래스형 컴포넌트에서 사용 클래스형 컴포넌트에서는 DOM 요소를 가져오거나 서버에서 데이터를 가져오기 위해서 API 를 ..

[React] Hooks - useState ( ) 📌 useState 함수형 컴포넌트에서는 '상태' 를 관리할 수 없었다. 하지만 React 16.8 에서 Hooks 가 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 된 것이다! '상태' 란 무엇일까? 상태는 컴포넌트에서 동적인 값을 말한다. 함수형 컴포넌트에서는 변하는 상태의 개별적인 업데이트가 요구된다. 클래스형 컴포넌트에서는 데이터를 교체하고 하나로 합친다. ✅ useState React 16.8부터 사용할 수 있게 된 Hooks 중의 하나인 useState 는 컴포넌트의 상태를 관리할 수 있다. useState()는 state와 state를 업데이트 하는 함수를 쌍으로 제공한다. const [state, setState] = useSta..

[React] form 제어하기 📌 form , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. state 를 누가 관리하느냐에 따라 제어 컴포넌트와 비제어 컴포넌트로 나뉘게 된다. element 를 가지고 있는 컴포넌트가 관리할 경우 제어 컴포넌트, element의 state 만 관리하지 않고 element 의 참조만 컴포트가 소유한다면 비제어 컴포넌트라고 할 수 있다. 아이디 비밀번호 찾기 📌 제어 컴포넌트(Controlled component) React 컴포넌트는 폼을 통해 사용자의 입력값을 제어할 수 있다. 컴포넌트의 state 를 '신뢰 가능한 단일 출처(Single Source of Truth)'로 만들어 HTML + React 요소를..

[React] 리스트(배열) 렌더링, Key 📌 JS 에서 리스트를 반환하는 방법 const arr = [1, 2, 3]; const arrChange = arr.map((arr) => arr + 1); console.log(arr, arrChange); map 함수는 배열 안의 요소로 새로운 배열을 반환한다. 원본을 변형하지 않는다. 리액트에서도 자바스크립트에서처럼 리스트를 반환하는 방법은 비슷하다! 리액트에서는 map 함수를 이용해 리액트 엘리먼트를 반환하면 된다. Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 📌 리액트..

[React] 조건부 렌더링 📌 조건부 렌더링 리액트에서는 원하는 동작을 `캡슐화`하는 컴포넌트를 만들 수 있다. 이렇게 하면 상태에 따라 몇 개의 컴포넌트만 화면에 효율적으로 렌더링할 수 있다. 조건부 렌더링은 특정 조건에 따라 다른 결과물을 렌더링하는 것이다. 리액트에서는 조건, 상태에 맞는 컴포넌트를 반환을 위해 if문이나 조건부 연산자를 사용한다. ✅ if문 사용해서 조건부 렌더링하기 조건에 따라 보여지는 컴포넌트또는 내용이 다를 경우 조건부 렌더링하면 된다. function Sleep(){ return console.log('Go to sleep'); } function Study(){ return console.log('Study...') } 두 함수 중에서 상태에 따라 하나의 컴포넌트만 보여..

[React] state 컴포넌트가 데이터를 다루는 방법으로는 props 를 이용한 방법, state 를 이용한 방법, contet 를 이용한 방법이 있다. 📌 state 란? 클래스형 컴포넌트에서는 state를 통해서 기억할 수 있는 임의의 데이터를 관리할 수 있다. 하지만 함수형 컴포넌트에서는 그렇게 하지 못한다. 그대신 함수에서는 React Hooks 이라는 것을 제공해 state 를 관리할 수 있다. 📌 state 는 언제 사용하는가? 컴포넌트가 정보를 계속 추적 해야하는 경우, state를 생성하거나 업데이트하고, 사용할 수 있다. 📌 props 와의 차이 값이 변경되면 새로운 return 값을 만들어서 UI를 바꿔준다. 컴포넌트에 prop 을 입력하면 컴포넌트 함수가 처리해서 return 값을..

[React] 이벤트 처리하기 📌 이벤트 처리하기 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하다. ✅ 이벤트명은 카멜 케이스를 사용 이벤트 핸들러는 문자열이 아닌 함수로 전달한다. Hello React ✅ false 를 반환해도 기본 동작을 방지할 수 없다. welcome to my blog 따라서 이벤트의 기본 동작을 방지하기 위해 preventDefault 를 사용해야한다. function hello(e){ e.preventDefault(); alert('Hello'); } welcome to my blog ✅ 엘리먼트가 생성된 후에는 addEventListener를 호출할 필요가 없다. 엘리먼트가 처음 렌더링될 때 addEventListener를 제공하면 된다. 📌 클래스 컴포넌트 사용 시,..

[React] 컴포넌트(Component)와 Props 📌 컴포넌트 앱을 이루는 최소한의 단위를 말한다. 기존의 HTML 문서는 반복적인 부분을 단순히 하드코딩하여 재사용이 불가능했지만, 리액트에서는 컴포넌트를 통해 UI를 `재사용 가능`한 `조각`으로 나눠서 각각 관리할 수 있다. 📌 함수 컴포넌트 function Cafe(props){ return latte } props를 인자로 받아 react 엘리먼트를 반환한다. 최근에 함수형 컴포넌트를 많이 사용한다. 클래스 컴포넌트보다 간결하다. 📌 클래스 컴포넌트 ES6 class 를 사용하여 컴포넌트를 정의할 수도 있다. class Cafe extends React.Component { render(){ return latte } } 함수 컴포넌트보다 더..