본문 바로가기

JavaScript

 (94)
Redux Redux 중앙 데이터 관리소(Store)로 상태관리소로 접근 & 제어 공용 변수 저장소 전역 상태관리 라이브러리 즉, Global State를 의미하고 그것을 관리하게 도와주는 라이브러리(패키지) 필요 이유 Props로 State를 공유하는 방법에는 불편한 점 개선 세팅 $ yarn add redux react-redux 리덕스 카운터 프로그램 세팅 modules/counter.js // 초기 상태값(state) const initialState = { number: 0, } // const [number, setNumber] = useState(0) // 리듀서 : 'state에 변화를 일으키는' 함수 // (1) state를 action의 type에 따라 변경하는 함수 // input : state..
Hooks - useEffect, 의존성 배열(dependency array) Hooks - useEffect, 의존성 배열(dependency array) useEffact 렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅 컴포넌트가 화면에 보여졌을 때 컴포넌트가 화면에서 사라졌을 때(return) App.jsx import React, { useEffect, useState } from 'react' function App() { const [value, setValue] = useState('') useEffect(() => { console.log('hello useEffect!'); }); return ( { setValue(event.target.value); }} /> ) } export default App 의존성 배열 dependency array 이 배열..
Hooks - useState Hooks - useState 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖게 함 카운터, Todolist const [state, setState] = useState(초기값); 배열을 구조분해 할당으로 꺼내놓음. 함수형 업데이트 App.jsx import { useState } from 'react'; import './App.css'; function App() { const [number, setNumber] = useState(0); return ( Number State : {number} { // 기존 업데이트 방법 // setNumber(number + 1); // 함수형 업데이트 setNumber((curNum)=>{ return curNum + 1; }) }} > 누..
숙련주차, GlobalStyles, Sass 숙련주차, GlobalStyles, Sass GlobalStyles(전역 스타일링) 프로젝트 전체를 아우르는 스타일! cf. styled-components : 해당 컴포넌트 내에서만! App.jsx import './App.css'; import styled from "styled-components"; import TestPage from './components/TestPage'; const StContainer = styled.div` display: flex; ` const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px; background-..
숙련주차, Styled Components ,Css-in-JS 숙련주차, Styled Components, Css-in-JS JS code → CSS 코드 컴포넌트를 꾸미는 방식 styled-components 패키지 설치 $ yarn add styled-components App.js import './App.css'; import styled from "styled-components"; const StContainer = styled.div` display: flex; ` const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px; background-color: ${(props) => props.backgr..
반복되는 Component 처리하기 반복되는 Component 처리하기 컴포넌트 중복 map함수로 빼기 map 함수란? 원래 데이터를 가공하여 출력하는 방법 import logo from './logo.svg'; import './App.css'; function App() { const testArr = ['감자', '고구마', '오이', '가지', '옥수수']; return ( { testArr.map(function(item) { return {item} }) } ); } export default App; filer 함수 testArr = [1, 2, 3] testArr.filter((item) => { return item > 3 }) // [1, 2] App.js import React from 'react'; import '...
Styling Styling App.js import logo from './logo.svg'; import './App.css'; function App() { const style = { padding : "100px", display: "flex", // 수평 gap: "10px", // 간격 }; const squareStyle = { width: "100px", height: "100px", border: "1px solid green", borderRadius: "10px", display: "flex", alignItems: "center", justifyContent: "center", }; return ( 감자 고구마 오이 가지 옥수수 ); } export default App; 공통 객체 square..
실습 - 카운트 앱 실습 - 카운트 앱 내가 짠 코드 App.jsx import {useState} from 'react'; function App() { const [num, setNum] = useState(0); return ( {num} { // num += 1 setNum(num+1) }} > +1 { // num -= 1 setNum(num-1) }} > -1 ) } export default App; num = num - 1 안되는 이유 num을 바꿀 수 있는 유일한 방법은 setNum!!! 값은 바뀌지만, 반영이 안된다. React 프로젝트 내에 num을 바꿀 수 있는 방법으로 바꿔야한다! 다른 방법 { newNum = num + 1 setNum(newNum) }} >
Component & Rendering Component & Rendering Component 리액트의 핵심 빌딩 블록 중 하나로, 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조작으로 구성. UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체 JSX를 통해 선언하면 이를 리액트가 화면에 그려줌. 컴포넌트기반 개발 이전에는 UI를 표현하기 위해 직접 DOM객체를 조작(querySelector, 클래스(id)를 찾음)하는 명령형 프로그래밍으로 일일히 코드로 작성해줬음. React 리액트는 선언형 프로그래밍 방식으로 화면에 어떻게 그려야 할지는 React 내부에 잘 숨겨져 추상화 되어 있음. Rendering 컴포넌트가 현재 props와 state 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청..
State State 컴포넌트 내부에서 바뀔 수 있는 값 UI를 바꾸기 위해서 사용. 리액트에서 변경되야 하는 값은 반드시 State로 선언해야 함. App.jsx import {useState} from 'react'; import "./App.css"; function App() { const [name, setName] = useState('김할아버지'); return ( {name} 클릭 ); } export default App; App.jsx import {useState} from 'react'; import "./App.css"; function App() { const [fruit, setFruit] = useState(""); return ( 과일 : {fruit} ); } export defau..

티스토리툴바