React/개념

setTimeout / setInterval

호출 스케줄링 일정 시간이 지난 후에 원하는 함수를 실행(호출)할 수 있게 하는 것 setTimeout: 일정 시간이 지난 후에 함수 실행 setInterval: 일정 시간 간격을 두고 함수 실행 setTimeout let timerId = setTimeout(func|code, [delay time], [arg1], [arg2] ...) 초보 개발자는 setTimeout에서 함수를 넘길 때 함수 뒤에 ()을 붙이는 실수를 한다. setTimeout(sayHi(), 1000) → 잘못된 코드 sayHi()를 인수로 전달하면 함수 실행 결과가 전달되므로, setTimeout이 함수의 참조 값을 받도록 ()를 빼고 호출한다. setTimeout을 호출하면 타이머 식별자가 반환된다. 스케줄링을 취소하고 싶을 ..

React Router

라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다. 리액트 라우터는 신규 페이지를 불러오지 않고, 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 리액트 라우터 태그로 컴포넌트 최상단에 감싸주자. 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 하나의 Route 만을 렌더링하는 역할을 한다. 에는 path 속성에 경로, element 속성에 컴포넌트를 넣어준다. 컴포넌트 a 태그 대신 사용하여 브라우저의 주소 경로를 바꿔준다. App.js import {BrowserRouter, Routes, Route} from 'react-router-dom'; const App = () => { return ( ); }; Main..

투두리스트 구현 2

TodoEditToggle (수정 버튼 시 나오는 토글) 대부분은 form을 다룬 TodoInsert와 비슷함 해당 todo의 text 내용을 띄우기 위해 useEffect 를 사용해서 selectedTodo.text 값을 받아와서 의 value값에 지정해줌 const TodoEditToggle = ({onUpdate, selectedTodo}) => { const [value, setValue] = useState(''); useEffect(() => { if (selectedTodo) { // 지금 선택된 todo객체가 있다면 setValue(selectedTodo.text); } }, [selectedTodo]); const onChange = useCallback((e) => { setValue(..

Flex

해당 컴포넌트 속성에 'display: flex'를 적용해서 flex container를 만들 수 있다. 기본적으로 div는 block 속성을 갖고 있어서 수직으로 차곡차곡 쌓이게 된다. 'display: flex'를 적용하면 내부의 flex item들이 수평으로 정렬된다. 이 속성값을 설정해주면 해당 div가 flex container이며 내부 div들이 flex item으로 정의된다. flex container와 flex item에는 적용할 수 있는 속성이 각각 다르다. flex container : display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items flex item : order, fle..

투두리스트 구현 1

[React] 간단한 투두리스트 만들기 리액트를 다루는 기술 10장 일정 관리 웹 애플리케이션 만들기를 보면서 만든 투두리스트 앱입니다. 할 일 추가, 체크, 삭제 기능에 수정하기 기능을 덧붙였습니다. velog.io TodoTemplate, TodoInsert, TodoListItem, TodoList, TodoEdit 로 이루어져 있는 투두리스트를 만들 것이다. 기능 구현 우선 TodoTemplate 안에 입력창, 할일 목록들을 넣었다. JSX 형식으로 표현하면 이런 느낌이다. //앱을 이루는 컨테이너 박스 //할 일 입력창 //할 일 목록(ul) //할 일 (li) //수정하기 창(팝업창이라서 대충 빼놓음) 일정 항목에서 필요한 것은 텍스트(내용), 체크박스, 삭제버튼, 수정버튼이다. // id, ..

React Hook

각각의 컴포넌트에는 라이프사이클 (컴포넌트의 수명주기) 이 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. 라이프사이클은 크게 3가지로 생성될 때 (마운트), 업데이트할 때 (업데이트), 제거할 때 (언마운트)로 나뉜다. 업데이트는 다음의 4가지 상황에서 발생한다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 할 useState 컴포넌트에서 동적인 값을 상태(state) 라고 부른다. useState를 사용하여 상태를 관리할 수 있다. useState를 사용할 때는 상태의 기본값을 파라미터로 넣어서 호출한다. 이 함수를 호출하면 [state 변수, sette..

React CSS

CSS 적용하기 인라인 스타일링 style = {} 형식으로 입력하며, html 태그 안에 직접 입력하는 방법 {} 안에는 json 형식으로 속성명: '속성값' 으로 입력한다. 속성명은 camelCase를 사용하여 표기한다. (background-color → backgroundColor) 인라인 스타일 적용은 가장 높은 우선순위를 갖는다. CSS 스타일링 (css 파일 import) 별도의 css 파일에 스타일을 정의해놓고, 해당 css 파일을 컴포넌트에 import 하여 사용할 수 있다. camelCase 대신 기존 css 작성 방식과 동일하게 작성한다. css를 import 하는 방식은 해당 모듈이 아닌 전체 모듈에 적용되므로, 의도와는 다르게 css 클래스명이 충돌하는 경우도 발생한다. 컴포넌트에..

useEffect, useRef

useEffect React 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 한다. 사용법 import React, {useEffect} from 'react'; ' useEffect(function, deps) - function: 실행하고자 하는 함수 - deps: 배열 형태, function을 실행시킬 조건 deps에 특정 값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행한다. #1 Component가 Mount 되었을 때(나타남) useEffect(() => { console.log('렌더링마다 실행'); }); useEffect(() => { console.log('맨처음 렌더링때 한번만 실행') }, []); #2 Component가 ..

[생활코딩] React

React 컴포넌트 "독립적인 기능을 수행하는 단위 모듈" 효과 가독성 재사용성 유지보수 용이 → UI를 구성하기 위해서는 화면에 컴포넌트를 그리고(mounting), 갱신하고(updating), 지워야(unmounting) 한다. 컴포넌트는 각 프로세스가 진행될 때에 따라 Lifecycle 함수가 실행되므로 개발자는 이를 재정의하여 컴포넌트를 제어하게 된다. 컴포넌트의 속성 props 부모 컴포넌트가 자식 컴포넌트에게 주는 값 (값을 컴포넌트에 전달해줘야 할 때 사용) 컴포넌트의 mounting, updating 시점에 값이 할당될 뿐, 컴포넌트 내부에서 값을 변경할 수 없다. state 컴포넌트 내부에서 선언, 내부에서 값을 변경할 수 있다. 상황에 따라 변경되어야 하는 값을 정의한다. (동적인 데이..

Context API

Props와 State를 사용하게 되면 부모 컴포넌트 → 자식 컴포넌트, 즉 위에서 아래로, 한쪽으로 데이터가 흐르게 된다. 만약 다른 컴포넌트에서 한쪽으로 흐르고 있는 데이터를 사용하고 싶은 경우, 다른 컴포넌트에서 사용하고 있는 데이터를 현재의 데이터 흐름에 넣고 싶은 경우는 어떻게 해야 할까? React에서 데이터는 위에서 아래로 흐르게 되므로 사용하고 싶은 데이터와 이 데이터를 사용할 컴포넌트의 공통 부모 컴포넌트에 State를 만들고, 사용하고자 하는 데이터를 Props에 전달하면 해결할 수 있다. Context는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 흐름과는 상관없이 전역적인 데이터를 다룰 때 사용한다. 전역 데이터를 Context에 저장한 후, 데이터가 필요한 컴포넌트에서 해당 ..