Studying Coding Studying Coding

const ACTION_TYPES = { deposit:'deposit', with:'with' } const reducer = (state, action) =>{ console.log('working', state, action); switch (action.type){ case ACTION_TYPES.deposit: return state + action.payload case ACTION_TYPES.with: return state -action.payload default : return state; } } export function App(props) { const [number, setNumber] = useState(0) const [money, dispatch] = useReducer(r..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s Step 1. Context.js Make 'createContext', 'Provider' in here const AppContext = React.createContext(); const AppProvider = ({children}) =>{ const [isSidebarOpen, setIsSidebarOpen] = useState(false); const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); const [page, setPage] = useState({ page: "", links: [] }); const [locat..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s Order 1. Make 'createContext' 2. Make 'AppProvider', - build the - get one parm 'children', it will be the children components 3. Set inside the index.js > 's all the children components can use value 4. Option : Make 'useGlobalContext' and return useContext(AppContext) 5. Set 'const {using props} = useGlobalContext ' or 'useC..

reaact 에서 component를 만들면 트리형태로 구성이 된다. 위에서 아래로 , 즉 부모component에서 자식 componenet로 props를 통해 전달이 된다. Global data를 props로 일일이 전달하기는 어렵다. 또한 코드가 더러워 지기 쉽다. 때문에 comtext를 사용 > 부모component가 context를 설정하면 자식 component가 useContext를 통해 context를 받아옴 * context는 꼭 필요할때만 사용하는게 좋다. > Context를 사용하면 컴포넌트를 재사용하기가 어려움 짐 > prop drilling을 피하기 위해서 사용한다면 Component Composition을 먼저 고려해보는 것이 좋음 METHOD const value = useCon..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s useRef 의 정보는 re-render을 일으키지 않기에 불필요한 메모리 사용을 줄인다. 특정 DOM에 접근하고 싶다면 queryselector이나 getElementId를 활용., react에서 이러한 것들을 가능하게 해주는 것이 useRef. const refContainer = useRef(initialValue); Method 1. min-width:800px 까지는 'toggle btn ' 없이 links들이 다 보여짐 (display: grid) 2. width:800px 이하로 작아지면 'toggle btn'만들어 links들을 숨김 3. 'toggle btn' cl..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s - What do we need? 1. setLocal 2. getlocal 3. return 4. (list , alert) components 5.submit 6. edit 7. remove 8. clear 1. setLocal funxtion App(){ const [list, setList] = useState(getLocalStorage()); useEffect(()=>{ localStorage.setItem('list', JSON.stringify(list)); }, [list); } list 들을 string형식으로 local에 저장한다. 여기서 key는 'list' ..

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s - what should I do 1. make a form 2. Change the number of paragraphs according to the input number - Method 1. make a form return ( // submit 하면 어떤 변화가 일어날지 // paragraph수를 input 에 맞게 변화시켜야한다. Paragrapph : setCount(e.target.value)} // input 의 value를 넘겨서 setcount를 변화 > Submit 2. Change the number of paragraphs according to the i..

컴포넌트가 렌더링하는 것을 막기 다른 컴포넌트에 의해 렌더링될 때 컴포넌트 자체를 숨기고 싶을 때가 있을 수 있습니다. 이때는 렌더링 결과를 출력하는 대신 null을 반환하면 해결할 수 있습니다. function WarningBanner(props){ if(!props.warn){ return null; .... } } class Page extends React.Component{ constructor(props){ super(props); this.state = {showWarning : true}; this.handleToggleClick = this.handleToggleClick.bind(this); } render(){ return ( ... ) } }