본문 바로가기

전체 글

 (290)
[React] React Hooks (useContext) [useContext] useContext 를 통해 전역으로 데이터를 관리할 수 있음. (데이터의 중앙저장소) 기존에는 부모 컴포넌트 -> 자식컴포넌트로 프롭스를 전달해 데이터를 전달했다면, useContext 를 이용하면 자유자재로 데이터를 받아올 수 있음. Context API 필수개념 createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달(to 하위 컴포넌트) FamilyContext.js 생성 import { createContext } from "react"; // 여기서 null이 의미하는 것은 무엇일까요? export const FamilyContext = createContext(null); GrandFather...
[React] React Hooks (useRef) [useRef] 1. 저장공간 - state 와 비슷한 역할을 하나 ref 에 저장된 값은 렌더링이 일어나지 않는다. ref 의 값 변화가 일어나도 렌더링으로 인한 내부 변수들의 초기화를 막을 수 있음. 따라서 state 는 리렌더링이 필요한 값에 사용하고, ref 는 리렌더링을 발생시키지 않는 값을 저장할 때 사용된다. 2. DOM 렌더링 되자마자 특정 input 이 focusing 되어야 한다면 useRef를 사용하면 됨. 객체 안에 key 가 current, value 가 초기값임을 확인할 수 있음. import React from "react"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.l..
[React] Styled Components styled-components 를 사용하기 위해서는 다음과 같은 패키지를 설치한다. yarn add react styled-components 1. css in JS : 자바스크립트로 css 코드를 작성하는방식 style component를 styled.태그 형태로 다음과 같이 작성하고 확인해보면 import "./App.css"; import styled from "styled-components"; const StBox = styled.div` width: 100px; height: 100px; border: 1px solid red; margin: 20px; `; function App() { return 박스; } export default App; 스타일이 잘 적용 된 것을 확인할 수 있다. ..
[React] React Hooks (useEffect), clean up [useEffect] useEffect 는 react 컴포넌트가 렌더링이 될 때마다, 특정 작업을 수행할 수 있게 하는 Hook. 다음 식을 실행시키면, import React, { useEffect, useState } from "react"; const App = () => { const [value, setValue] = useState(""); useEffect(() => { console.log("hello useEffect"); }); return ( { setValue(event.target.value); }} /> ); }; 인풋에 값을 입력할 때마다 useEffect 가 실행되는 것을 볼 수 있으며, 초반에 hello useEffect 가 두번 실행되는 것은, strictmode 때문. ..
[React] React Hooks (useState) [useState] - 가장 기본적인 hook - 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함 - 카운터, ToDoList const [state, setState] = useState(초기값); useState 의 리턴 값은 배열인데, 그 리턴값을 구조분해 할당으로 받아옴. useState 에는 두가지의 업데이트 방식이 있다. 1. 일반형 업데이트 방식 React는 한꺼번에 변경된 내용을 종합해 batch 업데이트를 하기 때문에, 아래의 버튼을 누르면 1씩만 증가함. 렌더링이 잦으면 성능에 이슈가 있는 것이기 때문에 react 는 이 방식을 택함. // src/App.js import { useState } from "react"; const App = () => { const [number, se..
WIL 23.06.18 [개인프로젝트] TO DO LIST TO DO LIST 개인프로젝트를 마치면서 그동안 배웠던 것 중에 기억해야 할 것을 적어보려고 한다. Title, Note 에 각각 값을 입력하여 WorkingList 에 추가할 수 있고, 추가 된 값은 완료를 눌러 DoneList 로 옮기거나 옮겨진 값을 취소를 눌러 불러올 수 있으며 x를 클릭하여 값을 삭제할 수 있다. 문제점 1. 기존의 아이디 값이 정해져 있어서 완료를 눌렀을 시에, 그 id 값의 우선순위에 따라서 DoneList 에서 차례대로 값이 쌓이는게 아닌, 값이 id 값 순서대로 쌓였음. 예를들어, 위의 '수학 (id : 1)' 에 확인버튼을 누르면 '과학 (id : 4)'밑으로 쌓이는 게 아닌, 수학의 id 값인 1에 의해 영어(id : 3)의 위로 값이 이동함. 큰 문제는 아니지만 불..
[React] map 메소드 적용/ 오류 해결 map 메소드로 다음과 같이 작성하면 import logo from "./logo.svg"; import "./App.css"; const App = () => { const users = [ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3, age: 21, name: "김유정" }, { id: 4, age: 29, name: "구교환" }, ]; return ( {users.map((v) => { return ( {v.name}-{v.age} ); })} ); }; export default App; css 가 적용된 상태의 이름과 나이값을 담은 li 태그가 생성된다. 그러나 다음과 같은 오류가 발생하는데, map 함수를..
[React] Styling 적용하기 filteredArr 에 value 값이 "옥수수" 인 것만 할당하여 그 값에 스타일을 적용한다. import logo from "./logo.svg"; import "./App.css"; function App() { const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; const filteredArr = testArr.filter((value) => value === "옥수수"); return ( {filteredArr.map((value) => ( {value} ))} ); } export default App;

티스토리툴바