728x90 반응형 SMALL 기술 개발/React16 About Redux 1. 리덕스가 필요한 이유 (1) useState의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었다. 근데 Props로 State를 공유하는 방법에는 불편한 점이 있다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 이러한 불편함 겪지 않기 위해 새로운 도구인.. 2022. 8. 5. React Hooks(useEffect) 1. useEffect (1) useEffect는 언제 사용할까? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶거나 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용한다. useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React, { useEffect } from "react"; 로 import 해서 사용한다. (2) 코드로 보는 useEffect 기초 // src/App.js import React, { useEffect } from "react"; const App = () => { useEf.. 2022. 8. 4. React Hooks (useState) 1. useState 정의 useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다 useState의 기본적인 형태 const [state, setState] = useState(initialState); state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있다. 그리고 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다. 2. 함수형 업데이트 setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣을 수 있다. 그리고 그 함수의 인자에서는 현재의 state을 가져올 수 있고, { } 안에서는 이 값을 변경하는 코드를 작성할 수 있다. // 일반 사용법 setState(number + 1.. 2022. 8. 3. 컴포넌트 꾸미기 (CSS-in-JS) 1. CSS-in-Js란? (1) css-in-js란 무엇인가? 자바스크립트 코드에서 CSS를 작성하는 방식 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이다. CSS-in-JS 방식을 사용하기 위해 styled-components 라는 패키지를 사용합니다. (2) styled-components란? styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지! styled-components 외에도, emotion, tailwindcss 가 있지만 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지다. 2. styled-components 준비하기 (1) VScode 플러그인 설치 (2) yarn 에서 styled-.. 2022. 7. 30. 이전 1 2 3 다음 728x90 반응형 LIST
