본문 바로가기
분류 전체보기
 (410)
[리액트(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..
[리액트(React)] 조건부 렌더링(Conditional Rendering) // 조건부 렌더링, Conditional Rendering - 조건부 렌더링 - 조건(조건문)에 따라 일부 컴포넌트만 렌더링할 수 있다. - {} 안에 && 연산자나 삼항 연산자를 활용하여 조건부 렌더링을 할 수 있다. // && 연산자 사용 {!selectedTopic && Please select a topic.} {selectedTopic && ( {EXAMPLES[selectedTopic].title} {EXAMPLES[selectedTopic].description} {EXAMPLES[selectedTopic].code} )} //삼항 연산자 사용 {!selectedTopic ? ( Please select a topic. ) : ( {EXAMPLES[selectedTopic].title} {..
[리액트(React)] 이벤트 핸들러 // 이벤트 핸들러(이벤트 리스너) - 이벤트를 실행 및 처리하는 것 - 어떤 사건이 발생하면 사건을 처리한다. - 이벤트 함수명은 handle+행위 또는 행위+handler로 짓는 것이 일반적이다. ~ handleClick, clickHandler ... - 화살표 함수 또는 익명 함수로 이벤트 함수를 정의하여 커스텀 인자를 전달할 수 있다. // 화살표 함수 함수명(인자)}/> //익명 함수 - 클래스형 컴포넌트에서는 this를 직접 바인딩 해주거나 화살표 함수를 사용하여 바인딩해야 한다. - 함수형 컴포넌트에서는 함수 안에 함수로 정의하거나 화살표 함수를 사용하여 정의한다. // 클래스형 컴포넌트 - this 직접 바인딩 import React from 'react'; const styles = {..
[리액트(React)] Hook // Hook - function 컴포넌트에서 class컴포넌트와 동일한 기능을 사용할 수 있게 해준다. - 이름 앞에 use를 붙여 hook임을 나타낸다. - 최상위 컴포넌트에서만 호출해야 한다. - 렌더링될 때마다 늘 같은 순서로 호출되어야 한다.(조건문x) - 중첩된 함수나 if문 등에서 사용할 수 없다. // useState - state를 사용하기 위한 hook const [ 변수명, set변수명 ] = usetState(초기값); import React, { useState } from 'react'; function Counter(props) { const [count, setCount] = useState(1); return ( 총 {count}번 클릭했습니다. setCount(count ..

티스토리툴바