캐나다 개발자

뭔가 Layout만 하기에는 심심할거 같아서 useRef()를 통해서 input 값을 동적으로 name에 줘봤다. 다만 input창을 초기화 시키는 방법을 실패했다. 막장의 소스코드는 아래있다 app.js and start.jsx 더보기 // app. js import React, {useState, useRef} from "react"; import styled from "styled-components"; // styled component // components import Start from './Start.jsx' import img from "./scc_img01.png"; function App() { const [name, setName] = useState('르탄이'); // name에..

1. ThemeProvider 사용할려면 import 먼저해야하고 import { ThemeProvider } from 'styled-components' 아래처럼 적용하고싶은 범위에 theme을 적용가능하다. const theme = { dark: { primary: '#000', text: '#fff', }, light: { primary: '#fff', text: '#000', } function App() { return ( HELLO HELLO HELLO GO TO GOOGLE SUBMIT LIGHT ); } 다크모드를 만드는걸 예로들면 코드는 아래와 같이 props에 접근해서 theme객체안의 light객체안의 값에 접근가능 (위에서 2중객체로 만들었다.) export const LightBu..

장점 페이지에서 렌더링되는 요소에 맞춰 자동으로 해당 스타일만 삽입합니다. 그때그때 필요한 스타일만 로드한다는 거죠! 스타일에 대한 고유 클래스명을 생성합니다. 중복이나 오타 걱정 노놉 더이상 사용되지 않는 CSS를 쉽게 삭제할 수 있습니다. 모든 스타일은 특정 요소와 연결되어 있기 때문에 해당 요소가 삭제되면 스타일도 삭제돼요. 동적 스타일링이 편해집니다. 이 props가 있다면 A, 없다면 B와 같이 직관적으로 개별 스타일링이 가능해요. 출처: https://nykim.work/107 npm install styled-components TIP. styled-components 내에서 emmet을 쓰고 싶다면 vscode-styled-components 을 설치 1. Styled Components ..

HTML에서 변화는 감지하지만, 그 변화가 렌더링을 발생시키지 않을때 사용 1. 변수저장으로 사용된다 const ref = useRef(value) 이런식으로 선언하면 인자로 넣어준 value는 {current: value}로 저장이 된다. 그래서 이 객체의 값은 ref.current= value로 언제든 수정가능 state는 html에서 자꾸 변경되는 값에 쓰기 좋은데 ref는 렌더링이 안되기 때문에 변수들의 값을 유지할때 많이 쓴다. **state에서 렌더링을 다시해도 ref의 값은 유지가 된다. 만약 내가 보여주지는않지만 상태가 바뀔때마다 상태를 저장하고싶은게 있는데, 그걸 일반변수로 해버리면, 일반변수는 처음 초기값으로 돌아간다. 하지만 ref의 값은 안돌아간다. import { useRef, u..

아직 경험이 적어서 쓰는곳에 대해 잘은 모르지만, open source API 가져올떄 (fetch()나 등등으로) 딱 한번만 가져오면 되니까 그럴때 사용. 1. componentDidMount mount될때만 실행되는 코드, 두번째 인자에 빈 배열을 넣는다. useEffect(() => {}, []) import { useEffect, useState } from 'react'; const App = () => { const [count, setCount] = useState(0); const increment = () => setCount(count+1); const decrement = () => setCount(count-1); const notRun = ''; // count가 호출될때마다 실행..

useState()는 react library에서 정의된 자바스크립트 함수이다. useState를 호출하면 배열을 반환한다. 첫 번째 원소가 현재 상태를 설정하고, 두 번째 원소는 상태를 갱신해 주는 함수이다. const [현재상태, 상태의갱신을도와줌] = useState(현재상태에게 줄 초기값) 그냥 html화면에서 자주 갱신되거나 변경될거같은건 state로 빼주면 편하다. import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; const App = () => { // count같이 html에서 자주 변할만한거는 state로 빼준다 const [count, setCount] = useState(0); // ..

컴포넌트만들떄 js파일보다는 jsx파일로 만들어야지 그 파일이 react파일인게 더 구별잘감

컴포넌트가 필요한 상황 1. html 들이 반복될때 컴포넌트로 만드는게 좋다 2. 큰페이지 하나하나를 컴포넌트로 만드는게 좋다 단점 1. 다른함수에 정의된 state들을 가져다 쓰기 불편함

React에서 State를 쓰는이유는 State를 쓰던 html은 State가 변경되면 재 렌더링 된다. 즉, html부분에서 자주 변경될거 같은부분은 state로 만들어 두면 된다. // State Import import { useState } from 'react'; // State 예시 let [val, setVal] = useState('남자옷'); // 이런식으로 html에 값을주면 자동으로 재 렌더링이 안된다. let post = '강남 우동 맛집'; 비슷한 성질의 여러개 태그에 state를 써야할경우, 묶음처리도 가능하다. let [title, setTitle] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학']) // 사용할때는 {title[0]} state의 ..

/* eslint-disable */ 제일 위줄에 추가