'react' 태그의 글 목록

2022. 10. 22. 20:25 프로그래밍/React

🔧 삽질 기록입니다. 🔨 프로그래머스 데브코스 프론트엔드 3기에 합류하고 벌써 일주일이 지났네요. 깃허브에서 3기 분들 35명을 일일이 팔로우하다가 한 번에 팔로우 해주는 프로그램을 한 번 만들어봐야 겠다는 생각이 들었습니다. 아래는 완성본입니다. 깃허브 API 깃허브 REST API 공식 문서입니다. GitHub REST API - GitHub Docs To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API. docs.github.com Users 문서의 user 리스트, user 정보, 팔로워 가져오기 등의 API를 postman으로 확인했습니다. 아래는 user의 정보를 가져오는..

[Recoil] 리코일 이해하기

2022. 9. 15. 02:07 프로그래밍/React

Recoil 리코일은 리액트에서 사용할 수 있는 전역 상태 관리 라이브러리이다. 여기서 전역 상태(global state)란 어플리케이션 전체에서 공유되는 state를 의미한다. 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 리코일의 필요성은 위의 공식 문서에서 확인할 수 있다. 간단하게 props drilling으로 인한 불필요한 리렌더링 발생을 방지하고 유지보수의 어려움을 해결하기 위함으로 이해했다. Recoil은 다음 명령어로 설치할 수 있다. npm install recoil Atoms atom(options) | Recoil atom은 Recoil의 상태를 표현한..

[React] Link와 useNavigate

2022. 6. 23. 14:06 프로그래밍/React

Link import * as React from "react"; import { Link } from "react-router-dom"; function UsersIndexPage({ users }) { return ( Users {users.map((user) => ( {user.name} ))} ); } react-router-dom에서 제공하는 Link 컴포넌트는 DOM에서a 태그로 변환 내부적으로 a 태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 a 태그와 다르게 페이지 자체를 새로고침 하지는 않음 (History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장) 페이지가 새로고침 될 경우 현재 렌더링 되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링 → 컴포..

[React] Styled-components Naming

2022. 6. 12. 03:38 프로그래밍/React

Styled-components란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고 태그나 id, class이름으로 가져와 쓰지 않고 컴포넌트 이름을 쓰듯 스타일을 지정하는 방식 css 파일을 밖에 두지 않고 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어주는 장점이 있음 Styled 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 css를 사용할 수 있음 글 작성 이유 className에 대한 고민이나, BEM 사용법이 맞는지 등.. 고민을 안 하게 되어서 좋았지만 styled-component의 이름을 어..

[React] 이벤트 핸들링

2022. 4. 19. 10:48 프로그래밍/React

이벤트 (Event) 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 onmouseover, onclick 이벤트 등 import React, { useState } from 'react'; const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('안녕하세요!'); const onClickLeave = () => setMessage('안녕히 가세요!'); const [color, setColor] = useState('black'); return ( 입장 퇴장 ... 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성 HTML의 onclick -> ..

[React] component, props, state

2022. 3. 9. 09:39 프로그래밍/React

컴포넌트 앱을 이루는 최소한의 단위 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 존재 클래스형 컴포넌트 class App extends Component { render() { const name = "리액트"; return {name}; } } 함수형 컴포넌트 // 일반 함수 function App() { const name = '리액트'; return {name}; } // 화살표 함수 const App = () => { const name = '리액트'; return {name}; } [참고] 일반 함수와 화살표 함수의 this [javascript] 일반 함수와 화살표 함수의 차이 (feat. ES6) 항상 일반 함수와 화살표 함수의 정확한 차이점을 지나쳐 왔습니다. 단순하게 화살표 함수(A..

[React] 리액트 발상, JSX

2022. 3. 7. 16:20 프로그래밍/React

리액트의 발상 [상황] 인터랙션이 많고 동적 UI 표현이 필요합 웹 애플리케이션 ↓ [문제] DOM을 직접 건드리면서 작업하면 코드가 난잡해지기 쉬움 ↓ [해결] Ember, Backbone, AngularJS 등의 프레임워크 등장 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결 = 업데이트 작업 간소화 ↓ [문제] 애플리케이션의 규모가 크면 상당히 복잡해지고 제대로 관리하지 않을시 성능 저하 발생 ↓ [해결] React 라이브러리 등장 데이터에 변화가 있으면 기존에 있던 뷰를 날려버리고 새로 렌더링하는 방식 더보기 렌더링 사용자 화면에 뷰를 보여주는 것 ↓ [문제] 모든 것을 새로 만들면 속도와 성능 저하 ↓ [해결] Virtual DOM 사용 더보기 DOM (Document Obj..

[React] 초보자를 위한 리액트 강좌 4

2022. 1. 27. 09:45 프로그래밍/React

PUT(수정) 아는 단어인지 체크하는 부분은 상태를 유지하는 게 좋음 -> PUT메소드를 이용하여 단어의 isDone필드를 수정하자 // Words.js ... function toggleDone() { fetch(`http://localhost:3001/words/${word.id}`, { method: "PUT", headers: { "Content-Type": "application/json", // 보내는 리소스의 타입 (html, 이미지 등) }, body: JSON.stringify({ // body에는 수정을 위한 정보들, JSON문자열로 변환 ...word, isDone: !isDone, }), }).then((res) => { if (res.ok) { setIsDone(!isDone); ..

[React] 초보자를 위한 리액트 강좌 3

2022. 1. 23. 20:26 프로그래밍/React

더미 데이터 구현, map() 반복문 db폴더 생성 - data.json 파일 생성 데이터 - https://github.com/coding-angma/voca/blob/lesson/9/src/db/data.json @ DayList 컴포넌트 생성 day 개수만큼 를 만들어줘야 함 -> map 사용 import dummy from "../db/data.json"; export default function DayList() { console.log(dummy); return ( {dummy.days.map((day) => ( Day {day.day} ))} ); } 이 상태에서 console을 보면 경고문이 뜸 Warning: Each child in a list should have a unique "..

[React] 초보자를 위한 리액트 강좌 2

2022. 1. 16. 11:30 프로그래밍/React

이벤트 처리 1. 미리 함수로 만들어서 전달 onClick={함수명} 문자열이 아니기 때문에 중괄호 사용 // Hello.js export default function Hello() { function showName() { console.log("Mike"); } return ( Hello show name show age ); } 만일 showName()과 같이 함수 뒤에 ()을 붙여주면 함수가 반환하는 값이 들어감 현재는 반환값이 없으니 undefined 2. onClick 내부에 직접 함수 작성 { console.log(30); }} > show age 이 방법의 장점은 매개변수를 전달하기가 편하다는 점 export default function Hello() { function showAge(..

티스토리툴바