본문 바로가기
클라이언트/React
 (48)
[리액트(React)] Fragments // Fragments - 불필요한 노드를 추가하지 않고 여러 요소들을 묶을 때 사용한다. - 리액트는 단일 루트 컴포넌트를 반환해야 하는데, 이럴 때 를 사용하면 불필요한 DOM 노드가 추가된다. - Fragment를 사용하면 불필요한 DOM 노드 없이 묶을 수 있다. - 최근에는 fragment 대신 빈 태그()를 사용하기도 한다. function App() { return ( Core Concepts {CORE_CONCEPTS.map((conceptItem) => ( ))} Examples handleSelect('components')} > Components handleSelect('jsx')} > JSX handleSelect('props')} > Props handleSelect('state..
[리액트(React)] CSS 스타일링 및 동적 스타일링 // CSS 스타일링 - 리액트에서 클래스를 설정하기 위해 className prop을 사용한다. ~ className="클래스속성명" #examples menu button.active { background-color: #7925d3; color: #ebe7ef; } // CSS 동적 스타일링 - 조건부로 클래스 속성을 추가할 수 있다. ~ className={조건 ? '클래스속성명' : ''} - 상위 컴포넌트에서 boolean 값을 전달받아 클래스 속성을 추가할 수 있다. export default function App() { return ( handleSelect('components')} > Components handleSelect('jsx')} > JSX handleSelect('prop..
[리액트(React)] React 18 버전 변경 및 추가 사항 // Automatic Batching - 여러 개의 state 업데이트를 각각 처리하는 것이 아니라 묶어서 한 번에 처리하는 것 - 재렌더링 횟수를 줄일 수 있다. setTimeout(() => { setCount(...); setName(...) }, 1000); 이전 버전 18 setCount(...) 처리 후 재렌더링 setName(...) 처리 후 재렌더링 setCount(...) 처리 후 setName(...) 처리까지 한 후 재렌더링 // Transition - 긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 긴급한 업데이트를 먼저 처리한다. ~ 긴급한 업데이트 : 사용자와 직접적인 인터랙션 有 ~ 긴급하지 않은 업데이트 : 사용자와 직접적인 인터랙션 無 - 긴급하지 않은 업데이트가 실행..
[리액트(React)] styled-components // styled-components - css 문법을 사용하며, 결과물을 컴포넌트 형태로 만들어주는 오픈 소스 라이브러리 - 설치 npm i --save styled-components yarn add styled-components const 컴포넌트명 = styled.HTML요소명` color: #6b7280; `; - tagged template literal을 사용하여 구성 요소의 스타일을 지정한다. ~ tagged template literal : 템플릿 리터럴 앞에 함수를 두는 형태 > 파라미터로 템플릿 리터럴 사용 const 컴포넌트명 = styled.HTML요소명` color: ${(props) => props.props명? 값1: 값2}; `; const 컴포넌트명 = styled.HT..
[리액트(React)] Context API // Context API - 전역적으로 데이터를 관리하고 접근하는 방법을 제공한다. - props drilling을 해결할 수 있다. > 중간 컴포넌트를 거치지 않고 직접 데이터를 공유할 수 있다. > 레벨이 다른 컴포넌트 간에 데이터를 쉽게 주고받을 수 있게 해준다. - context 값을 생성하고, 제공하고, 여러 컴포넌트를 묶어준다. - state와의 연결, 디버깅 등이 용이하다. 1. createContext 를 import한다. import { createContext } from 'react'; 2. 초기값을 할당하여 생성한다. const 변수명 = createContext(초기값); - 초기값을 undefined로 넣으면 초기값이 사용되지 않는다. - 초기값을 사용하고자 하는 구조에 맞게 ..
[리액트(React)] Composition // Composition - 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것(합성) Containment : 하위 컴포넌트를 포함하는 방법 Specialization : 범용적인 개념을 구체화하는 방법 - 다른 컴포넌트가 아닌 내용을 감싸서 구축할 수도 있다.(https://sorrel012.tistory.com/360의 props.children 참고) [리액트(React)] Component, Props // 컴포넌트, Component - 사용자 인터페이스를 구성하는 독립적이고 재사용 가능한 부분 - 여러 컴포넌트들을 조립하여 UI를 구성한다. - 컴포넌트명은 항상 대문자로 시작해야 한다. - 컴포넌트 함 sorrel012.tistory.com 상위 컴포넌트(A)에서 하위 컴포넌트(B) ..
[리액트(React)] Form // Form - 사용자로부터 입력을 받기 위한 형식 - 모든 데이터를 state에서 관리하기 때문에 관리가 용이하다. - 사용자의 입력을 직접적으로 제어 가능하다. - , , , 등의 태그를 사용한다. - 을 사용할 때, 일반 자바스크립트와 다르게 for=""이 아니라 htmlFor=""을 사용한다. Email // input 양방향 바인딩 1. useState() 2. useRef() - 값을 깔끔하게 설정하는 것이 어렵기 때문에 권장하진 않는다. 3. FormData // useState 1. 초기값을 useState로 선언한다. const [playerName, setPlayerName] = useState(initialName); - 여러 개의 값을 binding 해야 하면, 객체로 선언하여 하..
[리액트(React)] 리스트(List) // 리스트, List - 배열의 요소들을 화면에 보여준다. - 데이터의 상호작용(동적)을 관리하기 위해 사용된다. - map 함수를 사용하여 배열의 요소들을 리스트 항목으로 변환한다. {CORE_CONCEPTS.map((conceptItem) => ( ))} - ★각 항목에는 고유한 key가 필요하다. // key - 각 아이템을 구분할 수 있는 고유값(고유한 문자열) {CORE_CONCEPTS.map((conceptItem) => ( ))} import React from 'react'; const students = [ { id: 1, name: 'Amy', }, { id: 2, name: 'Hana', }, { id: 3, name: 'sorrel', }, ]; function Attendance..

티스토리툴바