728x90 📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js20 No Image 📷 [React .hook] Next.js 프로젝트에서 useEffect 호출이 2번되는 오류 Before we start... useEffect React의 가장 기본적인 hook이다. 한달전에 우리가 같이 복기한 시간이 있었다. 2024.02.17 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useEffect ? [React .hook] What is useEffect ? Before we start 들어가기에 앞서 이미 많이 사용해 본 경험이 있는 가장 대표적인 React hook중에 하나인 useEffect에 대해서 심층적으로 알아볼까 한다. A suitable situation for using 'useEffect' 1. Mount 될때 특정 jrogrammer.tistory.com mount 되었을 때 unmount되었을 때 v.. 2024. 3. 11. No Image 📷 [React .hook] What is useCallback ? Before we start 시작하기에 앞서 useCallback 에 대해서 알아보게 된 계기를 설명하겠다. 2024.02.23 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] Examples of using useMemo [React .hook] Examples of using useMemo Before we start 2024.02.22 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useMemo ? [React .hook] What is useMemo ? Before we start 2024.02.18 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧 jrogrammer.tistory.com useMemo를 알아보던 중에 u.. 2024. 2. 24. No Image 📷 [React .hook] Examples of using useMemo Before we start 2024.02.22 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useMemo ? [React .hook] What is useMemo ? Before we start 2024.02.18 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useState ? [React .hook] What is useState ? Before we start 시작하기에 앞서 React의 가장 기본적인 ho jrogrammer.tistory.com 전 게시글에서는 useMemo가 어떤일을 하는지 왜 사용이 되는지에 대해서 자세하게 알아보는 시간을 가졌다. 만약 useMemo가 왜 존.. 2024. 2. 23. No Image 📷 [React .hook] What is useMemo ? Before we start 2024.02.18 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useState ? [React .hook] What is useState ? Before we start 시작하기에 앞서 React의 가장 기본적인 hook중에 하나인 useState( )에 대해서 심층적으로 알아보자. What is useState ? const [state, setState] = useState(초기값); React 에서 state 생성할 때 쓰는 선언 jrogrammer.tistory.com 2024.02.17 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useEffect .. 2024. 2. 22. No Image 📷 [React .hook] How to use useReducer ? Before we start useReducer가 무엇인지 어떤 상황에서 사용해야하는지는 해당 글에서 정리해놓았다. useReducer가 처음이라면, 아래의 글을 읽고 오는것을 추천한다. 2024.02.21 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useReducer ? [React .hook] What is useReducer ? Before we start 시작하기에 앞서... 필자는 useReducer에 대해서 정말 알지 못한다. 기본적으로 자주 사용되는 React hook들은 한번쯤은 사용 해보았고 어디에 사용하는지 라도 알고있지만, useReducer는 정 jrogrammer.tistory.com So how to use useRed.. 2024. 2. 21. No Image 📷 [React .hook] What is useReducer ? Before we start 시작하기에 앞서... 필자는 useReducer에 대해서 정말 알지 못한다. 기본적으로 자주 사용되는 React hook들은 한번쯤은 사용 해보았고 어디에 사용하는지 라도 알고있지만, useReducer는 정확하게 알지 못했다. 이번 기회를 통하여 React와 조금 더 가까워지는 시간이 될것이라 생각한다. What is the useReducer ? useState 처럼 state를 관리하고 사용할 수 있게 도와주는 도구...! { Reducer, Dispatch, Action } = useReducer 만약 필자가 은행에서 만원을 출금하려면 은행의 장부를 수정하고 만원을 출금해달라는 내용과 함께 은행에 요구를 할 수 있다. 이 때, 장부는 State 가 되고, 은행은 Red.. 2024. 2. 21. No Image 📷 [React .library] How to use Redux ? 기본적인 세팅 redux 라이브러리 설치 및 의존성 주입 npm npm install redux react-redux yarn yarn add redux react-redux 파일 생성 및 기본 틀 생성 저장소 생성 (store) // src/store/index.js import { createStore } from 'redux'; import rootReducer from '../reducers'; // 루트 리듀서 const store = createStore(rootReducer); export default store; reducers 생성 (reducers) // src/reducers/index.js import { combineReducers } from 'redux'; import som.. 2024. 2. 20. No Image 📷 [React .library] what is Redux ? Before we start 시작하기에 앞서 Redux에 대해서 심층적으로 알아보게 된 계기를 설명할까 한다. 사실 Redux와 기능을 가장 비슷하게 하고 실제로 현업에서는 최근들어서 Redux 보다 더 많이 사용된다는 useContext, ContextAPI에 대해서 알아봤었다. React를 활용한 프론트엔드 프로젝트 개발을 해본 경험자라면, 두가지중 한개는 무조건 사용해보았을 것이라 믿어 의심치 않는다. 내가 이렇게 서두에 얘기를 하는 이유는 필자는 useContext를 사용해서 프로젝트 개발을 완성시켜본 경험만 있다. 즉, Redux에 대해서는 확실하게 아는것이 없다고 해도 무방할 정도였다. 근데, 개발자의 덕목이란 내가 익숙하지 않은 방법이라 할지라도 경험을 해보거나 사용법을 정확하게 알고 왜 쓰.. 2024. 2. 20. No Image 📷 [React .hook] How to use useContext ? Before we start 바로전에 useContext가 뭔지 Context API가 무엇인지 자세하게 기술해 놓았다. useContext 사용이 처음이라면 해당 게시글을 완독하고 오기를 추천한다. 2024.02.19 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useContext ? [React .hook] What is useContext ? Before we start 2024.02.15 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React] React's State Management [React] React's State Management - React 상태 관리 useState Hook 함수형 컴포넌트에서 상.. 2024. 2. 19. No Image 📷 [React .hook] What is useContext ? Before we start 2024.02.15 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React] React's State Management [React] React's State Management - React 상태 관리 useState Hook 함수형 컴포넌트에서 상태를 관리하는 가장 기본적인 방법. 컴포넌트 내에서 간단한 상태를 다룰 때 사용됩니다. import React, { useState } from 'react'; function ExampleComponent() jrogrammer.tistory.com 해당 게시글에서 간략하게나마 소개했던 useContext()를 오늘은 심층적으로 알아보고자 한다. What is useContext ? React의 Conte.. 2024. 2. 19. No Image 📷 [React .hook] What is useState ? Before we start 시작하기에 앞서 React의 가장 기본적인 hook중에 하나인 useState( )에 대해서 심층적으로 알아보자. What is useState ? const [state, setState] = useState(초기값); React 에서 state 생성할 때 쓰는 선언문이다. state 변경값은 state 에 있고 state 값을 변경하기 위해서는 setState를 사용한다. 초기 state 값을 초기화할 때 할당해주는 값 데이터는 useState(*초기값) 에 넣어준다. 예를 들어서 const [time, setTime] = useState(0) 이라고 선언하면 time이 렌더링 될 때 초기값은 0이다. 여기서 setTime(5)를 넣어주면 다시 렌더링 될 때 time 값은.. 2024. 2. 18. No Image 📷 [React .hook] What is useEffect ? Before we start 들어가기에 앞서 이미 많이 사용해 본 경험이 있는 가장 대표적인 React hook중에 하나인 useEffect에 대해서 심층적으로 알아볼까 한다. A suitable situation for using 'useEffect' 1. Mount 될때 특정 작업을 실행해야 한다면 ? 2. Update 될때 특정 작업을 실행해야 한다면 ? 3. Unmount 될때 특정 작업을 실행해야 한다면 ? What is useEffect ? useEffect의 대표적인 유형은 두 가지가 있다. 첫번째로 callback 함수만 받는 경우 useEffect(( ) => { //작업... }); 컴포넌트가 렌더링 될 때 마다 !! ==>> 콜백 함수가 실행된다. 즉, 컴포넌트가 초기화 하면서 처음 .. 2024. 2. 17. No Image 📷 [React .hook] Why must we use 'useId( )'? Before we start 2024.02.16 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React .hook] What is useId( ) ? [React .hook] What is useId( ) ? Before the start React hook은 여러가지가 있다. 2024.02.15 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React] React's State Management [React] React's State Management - React 상태 관리 useState jrogrammer.tistory.com 전 게시글을 읽고 왔다면 대부분의 개발자라면 한번쯤은 의문을 품었을 왜 굳이 useId( ) hook을 사용해야 할까? Math.. 2024. 2. 16. No Image 📷 [React .hook] What is useId( ) ? Before we start React hook은 여러가지가 있다. 2024.02.15 - [📁 𝐫𝐮𝐧𝐭𝐢𝐦𝐞𝐄𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭/React.js] - [React] React's State Management [React] React's State Management - React 상태 관리 useState Hook 함수형 컴포넌트에서 상태를 관리하는 가장 기본적인 방법. 컴포넌트 내에서 간단한 상태를 다룰 때 사용됩니다. import React, { useState } from 'react'; function ExampleComponent() jrogrammer.tistory.com 대표적인 React hook들을 정리해 놓은 게시글이니 참고하자. So what is userId ? 각설하고 오늘 처.. 2024. 2. 16. No Image 📷 [React] React's State Management - React 상태 관리 useState Hook 함수형 컴포넌트에서 상태를 관리하는 가장 기본적인 방법. 컴포넌트 내에서 간단한 상태를 다룰 때 사용됩니다. import React, { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } useReducer Hook 복잡한 상태 로직을 다룰 때 유용. 컴포넌트 내에서 여러 상태를 관리하거나, 상태 갱신이 이전 상태에 의존적일 때 사용됩니다. import React, { useReducer } from 'react'.. 2024. 2. 15. No Image 📷 [React] React's file structure - Create React App으로 프로젝트 생성 시 React 프로젝트의 파일 구조 my-react-app 프로젝트 생성시 node_modules 프로젝트에서 사용하는 모든 패키지 및 종속성이 설치되는 디렉토리. public 정적인 자원들이 위치하는 디렉토리. src 애플리케이션의 소스 코드가 있는 디렉토리. package.json 프로젝트의 메타데이터 및 의존성 정보가 있는 파일. README.md 프로젝트에 대한 문서 및 설명을 담고 있는 파일. .gitignore Git으로부터 무시할 파일 및 디렉토리를 지정하는 설정 파일. .eslintrc ESLint(JavaScript 및 JSX 코드의 정적 분석 도구) 설정 파일. 2024. 2. 15. 이전 1 2 다음 728x90
