아싸지만 1일1글 하고싶어

목차 주말에는 Redux를 배워서 올려버릴꺼야아아아~ position position은 말 그대로 위치 설정값으로 콘텐츠의 위치를 설정할 수 있다. 오늘의 설명을 도와줄 박스 2개이다. *{ padding: 0; margin: 0; } div{ display: inline-block; width: 200px; height: 200px; } .box1{ background: #ffe3fe; position: relative; } .box2{ background: #b4aee8; } static position 기본값으로써, 문서 흐름순으로 배치되며, 추가 위치 설정이 안 된다. *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ b..

목차 어라... border-radius를 안 했었네...? 진짜로..? 내가 제일 자주 쓰는 건데 border-radius border-radius는 직역하면 경계선-반지름이다. 경계선에 반지름을 추가한다는 뜻으로써 쉽게 얘기하자면 영역 모서리에 반지름을 추가한다는 뜻이다. 즉 모서리가 동글동글해진다는 것! 코드 div{ width: 200px; height: 200px; background: #ffe3fe; } 일단 기본형인 사각형을 만들었다. 값 1개 이제 여기서 div{ border-radius: 30px; width: 200px; height: 200px; background: #ffe3fe; } 이렇게 border-radius 값을 하나 지정하면, 모서리 4개가 다 해당 값으로 변환된다. 값 ..

목차 spread spread는 es6부터 추가된 배열이나 오브젝트를 말그대로 나열해주는 도구이다. const array = ["b ", "c ", "d "]; 예로들어 b, c, d를 가진 배열 array이 있다고 하자. array 값들을 가진 array2를 하나 더 만들려고 할때, 나열을 모른다면 이렇게 해야 할 것이다. const array2 = ["a ", array[0], array[1], array[2], "e "]; 하지만 spread를 안다면 이렇게 표현 가능하다. const array2 = ["a ",...array, "e "]; 코드 export default function App () { const array = ["b ", "c ", "d "]; const array2 = ["a ..

목차 어우.. 저녁을 너무 많이먹어버렸따... 삼항 연산자 삼항 연산자는 if else를 다르게 표현한 코드이다. 으음.. 예로 들어 if( toggle == True) console.log("True!"); else console.log("False!"); toggle이 참이면 True를 출력하고 거짓이면 False를 출력하는 이 if문은 (toggle == true) ? ( console.log("True!"); ) : ( console.log("False!"); ) 이렇게 삼항 연산자로 변환 가능하다. 코드 import {useState} from 'react'; export default function App () { const [toggle, setToggle] = useState(false)..

목차 useMemo useMemo는 랜더링 성능을 최적화하기 위한 hook이다. React는 Virtual Dom이란 가상의 객체를 랜더링 하고 이전 랜더링 결과와 비교 후,달라진 곳만 랜더링 한다. React란 React의 장점!! 새로운 언어를 쓸 때에는 그 언어의 장점을 인지하며 내가 이렇게 근사한 언어를 구사한다~라는 느낌으로 프로젝트를 하면 뭔가 기분이 좋다. 그래서 적어보는 리엑트의 장점!! 효 sirong.tistory.com 이때 memo는 memo 내 설정값이(deps) 변하지 않는 이상 리랜더링을 할 때 달라진 부분이 있는지 확인하지 않고 그대로 사용하게 만들어 리랜더링을 최적화시킨다. 코드 // App.js import {useState} from 'react'; import CatI..

목차 어우.. 긴장이 풀려서 그런가 오늘은 진짜 몸도 사고도 안 따라줘서 잠시 useReducer 이해를 미래의 나에게 맡겼었다. 그리고 그 미래의 나가 지금의 나다 후.. 그래도 컨디션 좀 회복하니깐 이해가 쉽다. useReducer 쉽게 말하면 useState 집합이다. state 개수가 많아질 경우, 이 모든 걸 하나하나 useState로 정의하고, 반영하기에는 코드가 번잡해진다. 이때 useReducer를 쓰면 깔끔한 정리가 가능하다. 또한 컴포넌트 안에서 제한되는 useState와 달리 useReducer은 컴포넌트 밖이나, 다른 파일에서 독립해서 정의 가능하다. 코드 import React, { useReducer } from 'react' const resetUserInfo = { id: '..

목차 useEffect useEffect는 컴포넌트가 랜더링 될 때마다 지정 작업을 하게 하는 함수이다. useState가 해당 변수가 변화할 때마다, 컴포넌트가 랜더링 하게 만들었다면, useEffect는 랜더링 했을때의 행동을 지정할 수 있다. 좀 더 대단하게 말하자면 useState가 데이터 유형 state를 대체한다면, useEffect는 lifecycle를 대체할 수 있다. life Cycle 목차 react의 hook에 대해 정리할려 했는데, 정리할려하니 life Cycle에 대하여 서술한 뒤 정리하여야 처음보는사람이 이해하기 쉬울 것 같아 먼저 적게되었다. life Cycle 생명주기 라는 뜻으로 코드를 sirong.tistory.com 구성 import React, { useState, u..

목차 드디어 훅을 포스팅하게 되었다. 훅이 좀 개수가 되니깐 한동안은 포스트 아이템 걱정을 안해두 되겠다 Hooks란 Hooks란 함수컴포넌트의 state(컴포넌트 안의 자료형)을 Lifecycle과 연동해주는 함수이다. 클래스형 컴포넌트에서는 작동하지 않는데, 그도 그럴게 클래스형에서는 state와 lifecycle 함수가 있어 그냥 직접 사용하면 된다. life Cycle 목차 react의 hook에 대해 정리할려 했는데, 정리할려하니 life Cycle에 대하여 서술한 뒤 정리하여야 처음보는사람이 이해하기 쉬울 것 같아 먼저 적게되었다. life Cycle 생명주기 라는 뜻으로 코드를 sirong.tistory.com 또한 if / while 등 분기문에서 사용할 수 없다. useState useS..