Sparta x 이노베이션 캠프/React (28) 썸네일형 리스트형 TIL : useMemo, useEffect, useCallback 각 사용법, 차이 invalid Hook call 에러가 나는 원인에는 여러가지가 있는데 Hook에 대해 잘 모르는 상태로 쓸 때 에러 확률이 높다. 특히 커스텀 Hook을 만들어 사용할때! Custom Hook을 쓰는 이유는 use로 시작하는 여러가지 Hook을 하나로 묶기 위함임. useEffect 목적 : 뭔가가 바뀌면 어떤 동작을 자동으로 실행하기 위해 사용한다. 인자 인라인 콜백함수: 의존성 리스트에 있는 항목 중의 하나가 업데이트 되면 실행시킬 동작 의존성 리스트: 이 리스트에 있는 요소가 업데이트되면 콜백함수를 다시 작동. useEffect(()=>{어떤 동작},[뭔가]); 사용 예 useState와 함께 사용하는 예시 const [ state, setState ] = useStae('idle'); //프로세.. TIL : dangerouslySetInnerHTML, DOMPurify 실전 프로젝트 첫째 주, 와이어 프레임 피드백을 받으면서 튜터님이 HTML 데이터를 받아와 그대로 코드에 삽입하려면 보안 문제 때문에 "ㅇㅇ" 처리를 해야 한다고 하셨는데, 그게 뭔지 몰라서 한참 구글링을 하다가 아~모르겠다 하고 잊고 있었다. 그리고 한 3주가 지난 오늘 어쩌다가 블로그 글을 읽는데, dangerouslySetInnerHTML과 보안 문제에 대한 것이었다. 게시글 상세조회페이지를 만들 때, HTML을 코드에 삽입하려면 dangerouselySetInnerHTML을 코드에 삽입하고 __html 키로 객체를 전달하면 된다는 것 까지는 알아내서 상세 게시글 조회까지 했는데, 이 키워드로 검색을 해 볼 생각은 그때 못했다. 오늘 어쩌다 발견해서 얼른 적어놓는다. React dangerously.. TIL : 이벤트 버블링과 캡처링 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때 까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. Form DIV P 위와 같은 구조에서 가장 안쪽의 를 클릭하면 다음과 같은 일이 벌어진다. 1. 에 할당된 onclick 핸들러가 동작 2. 바깥의 에 할당된 핸들러가 동작 3. 그 바깥의 에 할당된 핸들러가 동작 4. document 객체를 만날 때 까지, 각 요소에 할당된 onclick 핸들러가 동작한다. 거의 모든 이벤트는 버블링이 된다. (몇몇 이벤트 (ex. focus)는 버블링이 일어나지 않음) event.target 부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지.. TIL: useRef useRef() , 왜 필요한가? React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 렌더링(rendering)이 된다. 버튼을 누를 때 숫자가 증가하고 감소하는 카운터의 경우, 버튼을 누르는 만큼 상태값이 바뀌기 때문에 같은 횟수로 리렌더링이 된다. 카운터의 컴포넌트 함수는 상태가 바뀔 때 마다 호출이 된다는 말은 함수 내부의 변수들이 모두 초기화되고 함수의 모든 로직이 다시 실행된다는 것을 의미. import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); console.log(`랜더링... count: ${count}`); return ( {count}번 클릭하.. TIL: useEffect 언제 사용할까? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 React Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶을때, 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을 때, useEffect를 사용한다. //App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; } export default App; 브라우저에서 App컴포넌트를 눈으로 보는 순간, App 컴포넌트가 화면에 렌더링 될 .. TIL: 서버에 데이터 보내기. formData, JSON.stringify() 방식 왜 쓰는가? 프로젝트 진행 중 서버에 POST 요청을 보내는건 항상 있는 일이다. 예전 미니프로젝트 때 처음으로 데이터를 보냈었는데 사진과 text를 묶어서 보내느라 formData로 보냈었다. 유일무이한 방식인 줄 알았는데 아니었다. 미니프로젝트의 코드는 아래와 같음 ... const onSubmitHandler = async (event) => { event.preventDefault(); let req = { title: title, content: content, }; const formData = new FormData(); formData.append("image", image); let json = JSON.stringify(req); const titleblob = new Blob([json], { t.. TIL: 조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. 예로 App 컴포넌트에서 Hello 라는 컴포넌트를 사용 할 때, isSpecial 이라는 props를 설정해보자. App.js import React from "react"; import Hello from "./Hello"; import Wrapper from "./Wrapper"; function App() { return ( ) } export default App; 여기서 true는 자바스크립트 값이기 때문에 중괄호로 감싸주었다. 그리고, Hello 컴포넌트는 isSpecial이 true 이냐, false이냐에 따라서 컴포넌트의 좌측에 *표시를 보여줄것이다. 이를 처리하는 가장 기본적인 방법은, 삼항연산자를 사용하는.. TIL: React를 사용하는 이유 결론 : 요즘의 웹이 정적이고 단순한페이지를 넘어서 규모도 커지고 복잡하며 동적으로 바뀌었기 때문. 오픈소스 자바스크립트 라이브러리인 React, Vue를 사용하지 않아도 모두 바닐라 JS로 구현이 가능하며 정적인 웹페이지를 만드는 것 만이 목적이라면 굳이 프레임워크의 도움을 받지 않아도 되고 성능적 측면에서 바닐라 JS가 더 나을 수도 있다. 하지만 최근의 웹은 복잡하고 동적으로 변하고 있으며 이에 따라 프로젝트의 규모도 더 커졌다. 동적인 UI를 처리하기 위해서 그만큼 DOM 요소들에게 많은 연산을 하는 과정이 반복되면서 과부하가 걸리고 성능 측면에서도 당연히 좋지 않다. React를 사용해야 하는 이유 기능적인 측면에서는 굳이 Framework를 사용하지 않아도 되지만, Framework를 사용하는.. 이전 1 2 3 4 다음
