담쟁이 담쟁이

https://reactjs.org/warnings/special-props.html Special Props Warning – React A JavaScript library for building user interfaces reactjs.org https://stackoverflow.com/questions/42261505/getting-error-message-li-key-is-not-a-prop Getting error message "li: 'key' is not a prop" I'm working with React (version 15.4.2), and I'm populating a dynamically with query results from my database. I thought t..

https://storybook.js.org/docs/react/essentials/backgrounds Backgrounds Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org .storybook/preview.js에 parameters에서 backgrounds 값을 추가해준다. 해당 값에서 default 값과 background로 사용할 기본 색들을 추가할 수 있다. export const par..

https://app.netlify.com/ Netlify App app.netlify.com netfliy는 정적 웹사이트를 무료로 배포해주는 곳이다. github에 storybook이 적용된 react 프로젝트가 있다고 가정하고 진행한다. github repository에서 프로젝트를 Import한다. repsitory를 선택하였다면 site setting 과 basic build setting 란이 뜬다. site setting은 변화를 감지할 branch를 선택해주면되고 basic build setting 에서 build command 를 npm run build-storybook publish directory 를 storybook-static 으로 입력해준다. build-storybook을 ..

import { useRef, useState } from "react"; 사용할 Ref를 선언을 해준뒤 const authorInput = useRef(); const contentInput = useRef(); focus를 주고 싶을 때 사용한다. authorInput.current.focus(); contentInput.current.focus(); focus를 적용시킬 tag에 ref를 등록한다.

state를 다루는 것이 비슷하다면 여러개 선언하는 것이 아닌 다음과 같이 한개의 state에 선언해준다. const [state, setState] = useState({ author: "", content: "", emotion: 1, }); handle 함수를 두고 target의 이름을 가져와서 해당 target만 변경하도록 진행한다. const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; 1 2 3 4 5

보내는 쪽 import { useNavigate } from 'react-router'; const goToDetail = (s) => { navigate('/detail', {state : {id : s.championInfoList }}); }; navigate에 state로써 객체를 전할해 주면 된다. goToDetail(s)} /> 받는 쪽 import {useLocation} from 'react-router-dom'; const {state} = useLocation(); state.id 로 접근하면 된다.

import Counter from "./Counter" fuction App(){ return ( ) } const Counter = (props) = { console.log(props) } 콘솔에 찍어보면 {initialValue : 5} 라고 전달 된다. 여러개를 보내고 싶다면 를 한다면 {a : 1, b : 2} 가 찍힌다. props를 기본 값을 설정할 수 있다. const Counter = ({ initialValue }) => { Counter.defaultProps = { initialValue : 0, }; } 자식 component를 바로 props로 보내서 적용시켜줄수도 있다. const Container = ({children}) => { return ( {children} ) }..

react의 컴포넌트를 만드는데 유용한 문법이다. 태그를 사용하든 component를 사용가능하다. import MyHeader from './MyHeader.js' 를 하였다면 를 사용할 수 있다. 1. 닫침 규칙 반드시 모든 태그를 닫아줘야한다. 로 열자마자 닫을수 있다. (self closing) 2. 반환은 반드시 하나의 부모를 가져야한다. 반드시 최상위 태그로 묶어서 보내줘야한다. 없이 보내고 싶다면 import React from "react"; 로 감싸줄수 있다. 혹은 도 가능하다. inline style 방식 const style = { App:{ backgruondColor : "black" } } 를 통해 내부에서도 style을 만들어서 사용가능하다.