티스토리

Dr.Mlem Blog

검색하기

블로그 홈

Dr.Mlem Blog

dr-mlem.tistory.com/m

Dr.Mlem knows nothing but borking

구독자: 1

방명록 방문하기

주요 글 목록

useMemo와 useEffect 차이 Q1.useMemo와 useEffect의 차이점에 대해서 좀 더 설명해줄 수 있겠어? A1.ChatGPT의 말: 물론입니다! useMemo와 useEffect는 둘 다 React에서 의존성 배열을 사용하지만, 목적과 동작 방식이 다릅니다. 각각의 역할과 차이점을 상세히 살펴보겠습니다.useMemo란?주요 목적: 값을 메모이제이션하여 불필요한 재계산을 방지하고 성능을 최적화합니다.반환값: 계산된 값을 반환합니다.사용 사례:계산 비용이 높은 작업(예: 복잡한 수학 계산, 데이터 필터링 등)을 메모이제이션.특정 값이 바뀌지 않으면 이전 계산 결과를 재사용.동작 과정의존성 배열에 포함된 값이 변경될 때만 계산 함수를 실행합니다.계산된 결과를 메모리에 저장하고, 다음 렌더링에서도 동일한 값을 반환합니다.예제:.. 공감수 1 댓글수 1 2024. 12. 10.
Redux가 관리하는 상태변수, useMemo훅의 동작시기 (10 13-simple-dashboard의 dashboard/index.js 코드중...)Q1. const { loading, status, message, item } = useSelector((state) => state.TitanicSlice); 이런 코드가 있을 때, 변수 item은, React redux 기능을 통해 관리되는 상태변수라고 하면 알맞은 말인가? A1.네, 맞습니다. item 변수는 React-Redux 기능을 통해 관리되는 상태 변수입니다.useSelector 훅을 사용하여 Redux store의 상태를 구독하고 필요한 데이터를 가져오고 있습니다. 코드에서 item은 state.TitanicSlice에 정의된 item 속성을 참조합니다. 이 상태는 Redux의 TitanicS.. 공감수 0 댓글수 0 2024. 12. 10.
React 훅의 원칙 1 - 렌더링마다 한 번 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 12. 10.
ReduxHelper에서 extraReducers 파라미터는 무엇일까 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 12. 9.
useLocation, useNavigate 훅 (useLocation, useNavigate에 대한 설명은 12월 4일에 했으나, 해당 부분의 영상이 날아가서, 따로 복습하기 위해 작성한 글) Q1.React를 공부중에 있는데, useNavigate() 훅과 useLocation()훅에 대해서 배우고 있었어. 그런데 다른 훅들과 달리, 저 2개의 훅은 상대적으로 기능이 단순한 것 같아. 그래서 내가 배운게 맞는지 확인하고자 해. useNavigate()훅은, 현재 리엑트 프로젝트를 렌더링하고 있는 브라우저의 URL에, 파라미터로 받은 문자열로 변조해주는 것이고, useLocation()훅은, 현재 리엑트 프로젝트를 렌더링하고 있는 브라우저의 URL 정보를 가져오는 훅인 것이지? 내가 질문한 내용에 부족한 점이 있다면 보충해주고, 답변은 존댓말로 .. 공감수 2 댓글수 1 2024. 12. 6.
React의 Synthetic Event, Controlled Component로 인한 JS와의 차이 (React 10-11 simple-crud에서)Q1.리엑트에서, 어떤 form 태그에 input 태그 여러개가 있는데, 각각 name 속성에 id, dname, loc 를 부여했어. 이런 상황에서, form태그에 submit 버튼이 눌렸다고 가정할 때, const current = e.currentTarget; 이렇게 이벤트가 걸린 본인을 가져오고 있는데, 순정 JS는 저렇게 코드를 가져올 수 있는지 없는지가 궁금하고, 안된다면 React와의 어떤 차이에 의해서 안되는지, 이게 첫 번째 궁금한 내용이고, 그 다음 궁금한 내용이, 해당 코드 이후, form 태그 안에 name속성에 id, dname, loc가 부여된 input 태그의 값을 가져오기 위해서 const id = parseInt(curre.. 공감수 0 댓글수 0 2024. 12. 6.
React에서 상태 업데이트와 비동기처리 Q1.React에서, const [count, setCount] = useState(0);setCount(count + 1);setCount(count + 1); 이런 코드가 있으면, 최종적으로 count는 1이야? 2야? 그 이유도 자세히 설명해줘 A1.ChatGPT의 말: count의 최종 값은 1입니다.이유:setCount는 비동기로 작동합니다. 이 때문에 setCount를 호출할 때 즉시 상태(count)가 업데이트되지 않고, React가 상태를 배치(batch)로 처리하여 업데이트를 스케줄링합니다.코드 분석:const [count, setCount] = useState(0);setCount(count + 1); // 첫 번째 업데이트setCount(count + 1); // 두 번째 업.. 공감수 0 댓글수 0 2024. 12. 5.
의존성 배열을 받는 hook들 Q1.React에서 useEffect같은 경우에는, 2번째 파라미터로 의존성(혹은 종속성)배열을 넣어서, 그 배열 안에 계속 지켜볼 상태변수를 넣어두면, 해당 배열에 들어간 상태 변수들 중 하나라도 값이 바뀌면 useEffect에 들어간 콜백함수를 실행하게 되는데, 이때 궁금한 것이, 이 의존생 배열을 파라미터로 받는 hook은, React에서 useEffect 말고도 어떤 hook있는지야. 1. 어떤 hook들이 2번째 파라미터로 의존성 배열을 받는거야? 2. 또, 2번째 파라미터로 의존성 배열을 받는 다른 hook들이 있다면, 해당 hook들도 의존성 배열 안에 상태변수만을 받는지, 3. 그리고 배열에 들어간 값들을 useEffect 처럼 모니터링하다가 변화를 감지하면 hook에 들어온 콜백함수를.. 공감수 0 댓글수 0 2024. 12. 5.
useEffect의 의존성 배열과 콜백함수 Q1.짧게 물어볼게. useEffect에서 2번째 파라미터에 들어가는 배열에 상태변수 3개가 있다고 하자. 그 중 하나라도 바뀌면, useEffect에 걸린 함수가 전부 다 실행되는거지? 상태 변수 3개 다 바뀌어야 할 필요 없이, 그 중 하나라도 바뀌면 작동하는거지? A1.ChatGPT의 말: 맞아! useEffect에서 두 번째 파라미터인 의존성 배열에 상태 변수 3개가 있다고 하면, 그 중 하나라도 값이 바뀌면 useEffect에 정의된 함수가 실행돼.즉, 배열에 들어 있는 상태 변수 중 하나라도 값이 변경되면 리액트는 "이 의존성 배열 안에 있는 값이 변했구나!"라고 감지하고, useEffect의 콜백 함수를 다시 실행시켜.예를 들면:useEffect(() => { console.log("의.. 공감수 0 댓글수 0 2024. 12. 4.
React에서의 코드 스타일 vs JS 코드 스타일 (10-10 simple-ajax의 titanic/index.js 코드)Q1.현재 이런 React JSX 코드가 있어. 그런데, 드롭다운 메뉴에 있는 값을 읽어오는 함수에서,const choice=e.currentTarget.value;이렇게 드롭다운 메뉴에 있는 값을 한 번에 가져오고 있는데, JS에서는const current = e.currentTarget;const choiceIndex = current.selectedIndex;const choice = current[choiceIndex].value; 이렇게 가져와야 한다고 설명을 들었어. 왜 React에서만 해당 방식으로 드롭다운 메뉴의 값을 가져올 수 있는 것인지 설명을 해줘. A1.ChatGPT의 말: React에서 e.currentT.. 공감수 0 댓글수 1 2024. 12. 4.
useEffect()의 콜백함수 안에 async가 붙은 익명+즉시실행함수 Q1.useEffect(()=> { // Ajax 처리를 위한 비동기 구조. Hook에 연결되는 함수는 async를 직접 적용할 수 없기에, 즉시실행함수로 감싸준다. (async() => { // (async()=> {비동기 작업 처리할 내용...})() --> 이렇게 즉시실행함수로 만들어서 useEffect의 리턴값에 넣어주면, async를 적용할 수 있다. let data=null; setLoading(true); // 로딩 상태임을 표시 try{ data=await axiosHelper.get("/titanic"); console.log(data); .. 공감수 0 댓글수 0 2024. 12. 3.
하위 컴포넌트에서 CSS가 중복 적용되지 않는 이유 Q1.궁금한게, React에서 이런 저런 컴포넌트들을 따로 만들어서, 한 군데에서 조립을 하잖아? 그런데 그 와중에, styled 컴포넌트를 통해서 설정한 CSS 값들이, 상위 컴포넌트에 있는 내용과 하위 컴포넌트에 있는 내용이 겹칠 경우, 하위 컴포넌트에서는 하위 컴포넌트에 적용되어 있는 내용이 우선적으로 적용되는건가? 내 질문한 내용이 프로그래밍적으로 부족한 점이나 잘못 알고 있는 점이 있다면 지적해줘. A1.ChatGPT의 말: 너의 질문은 꽤 명확하고 중요한 CSS의 동작 원리에 대한 핵심을 짚고 있어! React에서 styled-components를 사용하는 경우, 그리고 CSS의 상속 및 우선순위 관련된 동작 원리를 제대로 이해하는 게 중요해. 질문에 대해 하나씩 차근차근 답변하면서 필요한.. 공감수 1 댓글수 1 2024. 12. 3.
Proxy 설정과 네트워크 통신 03 Proxy 설정과 네트워크 통신 02를 다시 읽다가 든 궁금증.Q1.나중에 갑자기 생긴 궁금증인데, 지금 질답과정에서 리엑트 개발 서버라고 계속 말이 나왔단 말이지? 그러면, 리엑트 프로젝트를 개발 완료하고 난 뒤에 상용화 시킨 이후에는, 개발 서버는 쓰이지 않게 되는거야? 그렇게 되면, proxy 설정같은 설정값들은 어떻게 되는거지? A1.ChatGPT의 말: 상용화된 React 프로젝트에서 개발 서버와 Proxy 설정의 역할React 프로젝트를 개발 환경에서 작업할 때 사용하는 React 개발 서버(e.g., localhost:3000)는 실제 상용화된 프로젝트에서는 더 이상 사용되지 않습니다. 대신, React 애플리케이션은 빌드(build) 과정을 거쳐 정적 파일로 변환되며, 이를 실제 서버에.. 공감수 0 댓글수 0 2024. 12. 3.
특정 라이브러리 전용 props명 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 12. 3.
Props로 값을 넘겨줄 때 파라미터명은? Q1.Comp1 으로 정의된 컴포넌트가 받는 props의 파라미터 명이 aaa, bbb, ccc 이며, aaa는 해당 컴포넌트의 height 속성, bbb는 width 속성, ccc는 z-index 속성에 대한 값이라고 하자. 이때, Comp1을 import해서 사용하는 파일 JSJS.js에서, Comp1에 height 속성값으로 100을 주고 싶다고 하면, JSJS.js 에서는, 라고 작성을 해야하나? 아니면 이라고 작성해야하나? 내가 한 질문 과정중에, props가 주고 받는 과정에 대해서 추가적으로 같이 설명하면서 물어봐야 할 부분이 있다면 지적도 해줘. A1.ChatGPT의 말: 좋은 질문이에요! 주어진 설명을 기반으로 대답하자면, 라고 작성해야 합니다. 이유는 Comp1이 받는 prop.. 공감수 0 댓글수 0 2024. 12. 3.
Proxy 설정과 네트워크 통신 02 Q1.내 상황을 설명해줄게. 포트번호 8080에, localhost:8080 url을 통해, 자체적으로 제작한 백엔드 서버가 있어. 해당 서버에서 /news 로 들어가면, 어떤 Json 데이터가 있고, 해당 json에는 item이라는 키와 거기에 어떤 배열이 연결되어 있는데, 연결되어 있는 그 배열 안에는 여러 Json들이 들어가있고, 그 Json들 하나하나는 신문기사 하나에 연결되어 있으며, 신문기사 하나에 해당하는 Json 안에는 image라는 키에 대한 값으로, 이미지 주소가 연결되어 있어. 문제는 이 이미지의 주소가, "image": "/files/news/573556_495480_4444_v150.jpg" 이런 꼴로 되어 있는데, localhost:3000에 연결된 React 프로젝트 내에는 .. 공감수 0 댓글수 0 2024. 12. 2.
참조변수.current Q1.React에서, 참조변수와 연결된 인풋태그만, 참조변수.current로 접근할 수 있는거야? A1.ChatGPT의 말: React에서 참조 변수 (ref)를 사용하면, 해당 변수는 특정 DOM 요소나 React 컴포넌트의 직접적인 접근을 제공해 줍니다. 하지만 참조 변수는 단순히 인풋 태그에만 국한되지 않으며, 다양한 DOM 요소나 클래스형 컴포넌트에도 사용할 수 있습니다. 이와 관련된 내용을 정리하자면:1. 참조 변수란?React에서 ref는 특정 DOM 요소나 React 컴포넌트의 접근을 위해 사용됩니다. 이는 useRef 훅(함수형 컴포넌트에서 사용)이나 React.createRef() (클래스형 컴포넌트에서 사용)을 통해 생성됩니다.2. ref.current란?ref.current는 re.. 공감수 0 댓글수 0 2024. 12. 2.
React에서의 key 값 Q1.(10-09 submenu_ex의 index.js)이런 리엑트 컴포넌트가 있는데, return( {v.label} {/** 2depth에 대한 반복처리 */} {v.children &&( {v.children.map((vv, ii)=> { 이 부분에서, v.id 대신 i로, vv.id 대신 ii로 바꾸었을때, 문제되는 것이 있을까? A1.ChatGPT의 말: 리액트에서 key 속성은 컴포넌트의 고유성을 보장하기 위해 사용됩니다. 이 속성은 React가 컴포넌트 트리를 업데이트할 때 어떤 항목이 변경, 추가 또는 제거되었는지.. 공감수 0 댓글수 0 2024. 12. 2.
Proxy 설정과 네트워크 통신 (10 10-simple-ajax 연구중...)Q1. 내 상황을 다시 설명해줄게. 포트번호 8080에, localhost:8080 url을 통해, 자체적으로 제작한 백엔드 서버가 있어.해당 서버에서 /news 로 들어가면, 어떤 Json 데이터가 있고, 해당 json에는 item이라는 키와 거기에 어떤 배열이 연결되어 있는데, 연결되어 있는 그 배열 안에는 여러 Json들이 들어가있고, 그 Json들 하나하나는 신문기사 하나에 연결되어 있으며, 신문기사 하나에 해당하는 Json 안에는 image라는 키에 대한 값으로, 이미지 주소가 연결되어 있어. 문제는 이 이미지의 주소가, "image": "/files/news/573556_495480_4444_v150.jpg" 이런 꼴로 되어 있는데, loc.. 공감수 1 댓글수 0 2024. 12. 2.
참조변수, 연속 querySelector()? Q1.St2veK: 참조변수이름.current 로 접근하게 되는 요소는 뭐야? 지금까지 참조변수이름.current에 대해서 들은 설명은, document.querySelector()과 비슷한 내용이라고 들었는데, 해당 내용이 맞다면, list.current.querySelector('li:first-child')는 document.querySelector(list를 선택할 선택자).querySelector('li:first-child')가 되는 꼴이라서, 헷갈려 A1.GitHub Copilot: `참조변수이름.current`는 React의 `useRef` 훅을 사용하여 생성된 참조 객체를 통해 DOM 요소에 접근할 때 사용됩니다. `useRef`를 사용하면 특정 DOM 요소에 직접 접근할 수 있습.. 공감수 0 댓글수 0 2024. 12. 2.
표현식과 문장의 차이 Q1.어떤 코드 자체가 문장인지 확인하는 방법은 뭐야? A1.ChatGPT의 말: JavaScript 코드가 문장(statement)인지 확인하는 방법은 그 코드의 문법적 역할과 문맥을 이해하는 데 있습니다. JavaScript 문장은 프로그램의 실행 단위로, 특정 작업을 수행하거나 실행 흐름을 제어하는 독립적인 코드 블록입니다.문장이란?문장(statement): 특정 작업을 수행하거나, 실행 흐름을 제어하는 독립적인 코드 단위입니다.예: 변수 선언, 함수 정의, 조건문, 반복문, return 문 등.특징:문장의 끝을 세미콜론(;)으로 표시하는 것이 일반적입니다.문장 블록은 중괄호({})로 감쌉니다.표현식과 문장의 차이표현식(expression): 값을 계산하거나 생성하는 코드 조각.예: 5 + 10.. 공감수 0 댓글수 0 2024. 11. 28.
React JSX 에서 ; 의 작성 Q1.(수많은 문답 끝에...)그래, 그럼 최종적으로 정리해볼게. 어떤 코드가 있을 때, 그 코드의 끝이 JSX의 표현식으로써 끝이 났다면 ;을 붙일 수 없으나, 그렇지 않고, JS의 문장으로써 끝이 났다면 ;을 붙일 수 있는 것인가? 위의 내용이 맞다면, 해당 코드의 위치가 JSX 내부냐 외부냐는 신경쓰지 않아도 될 것 같은데, 어떤가? A1.ChatGPT의 말: 당신의 정리는 거의 정확합니다! 하지만 몇 가지 중요한 점을 명확히 하기 위해, 다시 정리해보겠습니다.1. 결론: 세미콜론(;) 붙이는 기준1-1. JSX 표현식으로 끝난 경우JSX 표현식({} 안에서 평가되는 JavaScript 표현식)이 끝난 경우에는 세미콜론을 붙이지 않습니다.이유: JSX 표현식은 값을 반환하는 표현식으로 동작하며.. 공감수 1 댓글수 1 2024. 11. 28.
함수형 컴포넌트에서 쓸 함수 선언 위치, 이벤트 핸들러 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 11. 27.
React에서 useRef을 쓰게 된 경위 React의 SPA 작동 원리 특성상 사이트 전체에서 ID값이 고유해야 한다. 클래스명으로 접근을 하려 한다 한들, 겹치는 클래스명에 의해서 내가 의도치 않은 요소에 대한 조작이 이루어질 수 있기에, 그건 그거대로 문제가 됨.그래서, id와 클래스값으로 요소에 접근하는 방식은 사용하기가 매우 어렵다.... + 리엑트 안에서 VIRTUAL DOM 이란 물건 때문에 순정 JS에 비해서 동작 속도도 빠른데, 일단 이건 지금 수준에는 버거운 이야기... 공감수 0 댓글수 0 2024. 11. 27.
상태값이 갱신되면 리렌더링 되는 함수형 컴포넌트 Q1.내가 한 질문이 교수님께 질문했을때에도 흠잡을 없을 정도로 구성이 잘 된 질문인지 확인을 해주고, 또 내가 한 질문에 대해서도 답을 해주면 좋겠어. 리엑트에서 훅을 배우고 있어. 그런데, 기본적으로 리엑트의 함수형 컴포넌트들은, 컴포넌트 내의 상태값이 갱신되면, 그 상태값이 갱신됨에 따라 매번 새로 실행하게 되는거야? A1.ChatGPT의 말: 당신의 질문은 훌륭하고 교수님께도 충분히 적합한 수준으로 구성되어 있습니다! 질문을 약간 더 명료하고 기술적으로 다듬는다면 다음과 같을 수 있습니다:리액트에서 훅을 배우고 있습니다. 함수형 컴포넌트의 특성상, 컴포넌트 내부 상태값이 갱신될 때마다 해당 컴포넌트가 다시 렌더링된다고 알고 있습니다. 이 과정에서 컴포넌트 내부의 함수가 매번 새로 실행되는 것인.. 공감수 1 댓글수 1 2024. 11. 26.
useReducer 훅 시그니처? St2veK: useReducer(setCounterValue, 0); 이렇듯, useReducer는 첫번째 파라미터로 무조건 콜백함수를 필요로 하는거야? GitHub Copilot: 네, useReducer 훅은 첫 번째 파라미터로 반드시 리듀서 함수(콜백 함수)를 필요로 합니다. 이 리듀서 함수는 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다. useReducer의 시그니처는 다음과 같습니다:const [state, dispatch] = useReducer(reducer, initialState);여기서 `reducer`는 첫 번째 파라미터로 전달되는 리듀서 함수입니다. 이 함수는 두 개의 파라미터를 받습니다: 1. `state`: 현재 상태 2. `action`: 상태를 변경하기 .. 공감수 0 댓글수 0 2024. 11. 26.
useReducer 훅과, 거기로 불려갈 콜백함수의 파라미터 action, state (10-08 useReducer 공부중...)St2veK: @workspace /explain 27~39줄에 작성된 함수에 대해서, 해당 함수는 useReducer()훅에 콜백함수로 쓰이게 되는데, 이때 useReducer가 내부적으로 해당 콜백 함수에게 파라미터 2개를 주입해주기 때문에, 그렇게 쓰기 위해서 해당 함수는 파라미터를 2개 받는건가? 일단 각각 state, action 이라고 파라미터를 주었는데, 이렇게 파라미터 명을 지은 이유는, action 값에 의해서 state를 바꾸려고 하기 때문인데, 그러한 관점에서 봤을 때, 파라미터명을 지은 네이밍 센스에 대해서도 의견을 듣고 싶어. Workspace: 네, 맞습니다. `useReducer` 훅은 내부적으로 콜백 함수에게 두 개의 파라미터.. 공감수 1 댓글수 0 2024. 11. 26.
HTML - value VS JSX - defaultValue Q1.HTML만의 상황에서 설명해줘. HTML 구조에서 input 태그가 가질 수 있는 value 속성이, input 태그에 설정될 기본값인가? JS나 React의 경우 말고, 순수 HTML 문서에 대한 경우에 대해서 말해줘 A1.ChatGPT의 말: 순수 HTML에서 태그의 value 속성은 기본값을 설정하는 속성입니다. 사용자가 입력 필드에 값을 입력하거나 수정하기 전에, HTML 문서가 처음 로드될 때 해당 입력 필드에 표시되는 값이 됩니다.HTML에서 value 속성의 역할1. 기본값 설정value 속성은 HTML 문서가 로드될 때 입력 필드에 표시되는 기본값을 설정합니다.사용자가 입력 필드의 값을 수정하면 value 속성의 값은 브라우저의 메모리에 저장된 현재 값으로 바뀝니다.예를 들어:.. 공감수 0 댓글수 0 2024. 11. 25.
상태변수와 onChange 이벤트 핸들러조합으로만 써야 하는 경우. St2veK: 입력필드의 변경값을 실시간으로 갱신하기 위해선, 상태변수와 onChange 이벤트 핸들러를 걸어준다고 알고 있으면 되겠지? GitHub Copilot: 네, 맞습니다. 입력 필드의 변경값을 실시간으로 갱신하기 위해서는 상태 변수와 onChange 이벤트 핸들러를 사용하면 됩니다. onChange 이벤트 핸들러를 통해 입력 필드의 값이 변경될 때마다 상태 변수를 업데이트하여 실시간으로 값을 갱신할 수 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다:import React, { useState } from 'react';function MyComponent() { const [myName, setMyName] = useState(''); const onMyNameChange =.. 공감수 0 댓글수 0 2024. 11. 25.
이벤트 핸들러 방식? Q1.리엑트에서, 체인지 이벤트를 걸려고 하는데,이런 방식으로 되어 있었어.일반적인 JS에서는, addEventListener('click', 함수)~~~이런 식이었던 것 같은데,리엑트에서는 이렇게 on+이벤트 이름 으로 대체하는거야?그리고 이렇게 대체하는 방식이, "이벤트 핸들러" 라고 하는 방식인거야? A1.리액트에서 이벤트를 처리하는 방식은 일반적인 JavaScript의 addEventListener와는 다르며, 더 직관적이고 React의 컴포넌트 기반 구조에 맞게 설계되어 있습니다. 이를 하나씩 알아봅시다.1. 리액트의 이벤트 처리 방식리액트에서는 HTML 태그 속성처럼 보이는 방식으로 이벤트를 설정합니다. 예를 들어:여기서 onChange는 리액트에서 제공하는 이벤트 핸들러 속성입니다. 리액.. 공감수 0 댓글수 0 2024. 11. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.