반응형

<p>

  안녕하세요

  <div>인사</div> -> 얘를 만나면 p가 얘 앞에서 끊김

</p>

이렇게 작성한다면, 아래와 같이 자동 변환됨

 

<p>

  안녕하세요

</p>

  <div>인사</div>

 

https://bomango.tistory.com/59

 

P태그요소 안에 div 넣지 마세요. HTML 기본기 박살내기

HTML5의 등장으로 태그를 인라인/블록으로 나누는 시대는 지났다. 그러나 HTML를 공부할 때 인라인/블록의 개념을 반드시 알고 지나가야 한다고 생각한다. HTML5 등장 이전에 통용되던 개념은 "인라

bomango.tistory.com

 

반응형
저작자표시

'html, css' 카테고리의 다른 글

(<input>안에뭐쓰면에러남</input>)input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`  (0) 2024.01.18
[pointer-events: none;] disable copy&paste, 마우스 오른쪽 클릭 방지 등  (0) 2024.01.18
user agent stylesheet 각 브라우저마다 정해놓은 CSS 기본 규칙  (0) 2024.01.12
table head고정 예제 ( position: fixed; top: 0; )  (0) 2024.01.04
{ css cursor:pointer; }(링크가리키는 손모양)... 마우스화살표 설정  (0) 2023.12.21
반응형

html파일에서 <!DOCTYPE html>을 써주지 않아 html의 최신 버전을 알려주지 않거나,

user agent stylesheet에서 명시하는 속성을, 내가 직접 override하지 않으면 그 기본 규칙이 적용될 수 있다.

 

이를 미연에 방지하는 법은, 브라우저의 모든 기본 CSS 규칙을 초기화하기 위해

CSS Reset (meyerweb.com/eric/tools/css/reset/)을 해주는 것이 있겠다.

반응형
저작자표시

'html, css' 카테고리의 다른 글

[pointer-events: none;] disable copy&paste, 마우스 오른쪽 클릭 방지 등  (0) 2024.01.18
<div>와 대비되는 <p>특징: 내부에 다른 block요소 못넣음, 문단을 나누는 태그이므로 문단안에 끊기는게 있으면 안됨  (0) 2024.01.12
table head고정 예제 ( position: fixed; top: 0; )  (0) 2024.01.04
{ css cursor:pointer; }(링크가리키는 손모양)... 마우스화살표 설정  (0) 2023.12.21
height={calc(100vh - 400px)} width='calc(100vw - 50px)'  (0) 2023.12.20
반응형
반응형
저작자표시

'js' 카테고리의 다른 글

숫자(1000)를 1,000형태로: Intl.NumberFormat().format(숫자,문자열)-결과는 문자열  (0) 2024.01.31
Difference between fetch, ajax, and xhr  (0) 2024.01.19
import 경로에 JS파일이 아닌 디렉토리를 입력하면 index.js를 우선적으로 찾음  (0) 2024.01.11
regular expression  (2) 2023.11.08
변수의 true/false를 이용한 react 조건부 rendering (0 error case)  (0) 2022.08.31
반응형
e-checkboxfilter e-filter-popup e-control e-dialog e-lib e-popup e-popup-open {
  width: 282px;
}

-> .e-checkboxfilter .e-filter-popup .e-control .e-dialog .e-lib .e-popup .e-popup-open

로 수정하니까 정상동작함

반응형
저작자표시

'react' 카테고리의 다른 글

useRef - 여러개일때 배열로 사용하는 방법  (1) 2024.02.20
[React Jsx Syntax] style="display:none;"에러남 style={{display:'none',...}}로 써야함  (0) 2024.01.22
왜 리액트는 대세가 되었을까? DOM관리불필요,유지보수,생산성  (0) 2024.01.11
최적화: 비구조화(구조분해, destructuring) 할당을 통해 state갯수 줄이기  (0) 2024.01.11
[React.memo, useCallback]렌더링최적화 - component단위로 가능  (0) 2024.01.10
반응형
반응형
저작자표시

'js' 카테고리의 다른 글

Difference between fetch, ajax, and xhr  (0) 2024.01.19
.childNodes와 .children의 차이: .childNodes.forEach만 가능  (0) 2024.01.11
regular expression  (2) 2023.11.08
변수의 true/false를 이용한 react 조건부 rendering (0 error case)  (0) 2022.08.31
csv file download 구현  (0) 2022.08.18
반응형

https://goddaehee.tistory.com/

 

갓대희의 작은공간

갓대희의 "개발" 공간

goddaehee.tistory.com

 

반응형
저작자표시

'etc' 카테고리의 다른 글

티스토리 모바일크롬에서 수정이 안되는 현상 - 티스토리자체 모바일스킨으로 변경되기 때문, symn.tistory.com/m은 어떻게 해봐도 모바일자체스킨으로 변경됨 - symn.tistory.com로 들어가야함  (0) 2024.08.04
공부할 것들과 사이드 프로젝트 아이디어  (0) 2023.07.22
대기업 vs 스타트업 (둘다 다녀본 결과, 매우 개인적인 비교)  (0) 2023.07.22
tistory 댓글에 이미지추가하기 - 미넴스킨 사용  (0) 2023.07.12
티스토리 맨위로 맨아래로 버튼 생성  (0) 2023.06.06
반응형

https://simsimjae.tistory.com/382

 

왜 리액트는 대세가 되었을까?

주변에서 다들 리액트가 빠르다, 좋다. 하는데 정확히 어떤 부분이 좋은건데? 라고 물어보면 명확한 답변을 하기가 어려웠습니다. 그래서 이번기회에 리액트가 왜 좋은거고 어떤 장점이 있는건

simsimjae.tistory.com

 

브라우저의 렌더링 과정: parse -> layout -> paint -> composite(paint과정에서 나눠진 레이어들을 합침)

jQuery나 js로 직접 DOM에 접근해서 수정하면 매번 reflow (layout -> paint -> composite)이 일어나며 이는 렌더링 과정에서 대부분의 시간을 잡아먹는 작업이므로 비효율적

 

리액트는 업데이트가 필요한 UI컴포넌트를 하나씩 수정하지 않습니다. 리액트 컴포넌트가 리턴한 JSX를 해석해서 Virtual DOM에 그리고, 이것을 모든 컴포넌트에 대해서 반복합니다. 전부 다 그렸으면 실제 DOM과 비교해서 변경된 부분만 변경시켜주는것이죠. 어떻게 보면 조삼모사처럼 보일수도있습니다. 한번에 하나씩 변경시킬것인가? 아니면 모아서 한번에 처리할것인가? 근데 후자의 방법이 더 좋은 방법입니다. 왜냐면, 모아서 한번에 처리하면 리플로우는 딱 한번 일어나기 때문에 브라우저의 리소스를 덜 사용하기 때문입니다.

유저와의 상호작용이 많아서 서버에서 데이터를 가져와서 UI에 그 데이터를 묶어서 보여줘야 하는 경우가 많은 서비스에서는 리액트가 훨씬 개발하기 편하고 빠릅니다. 

DOM관리를 리액트가 알아서 편리하게 해주기 때문이죠. 저희는 그저 데이터와 UI 컴포넌트를 묶어주기만 하면 됩니다. 직접 DOM에 접근할 필요가 없어요.

출처: https://simsimjae.tistory.com/382 [104%:티스토리]

 

반응형
저작자표시

'react' 카테고리의 다른 글

[React Jsx Syntax] style="display:none;"에러남 style={{display:'none',...}}로 써야함  (0) 2024.01.22
react에 css 파일 import할때 css파일내에 문법에러있으면 import에러남  (0) 2024.01.11
최적화: 비구조화(구조분해, destructuring) 할당을 통해 state갯수 줄이기  (0) 2024.01.11
[React.memo, useCallback]렌더링최적화 - component단위로 가능  (0) 2024.01.10
useMemo: 값 재사용(rerender할때마다 초기화하지 않고 기억해두고 사용), useCallback: 함수 재사용  (0) 2024.01.10
반응형

state들이 한꺼번에 변화하고 같은 성질을 가진다면 아래와 같이 destructuring assignment를 통해 묶어서 사용

 

화면에 나타나는 변화하는 값들을 state로 사용하되 변화가 한꺼번에 일어나는 것이라면 하나의 state로 묶어서 사용

const [inputs, setInputs] = useState({ username: "", email: "" });
const { username, email } = inputs;

위와 같이 사용하면 inputs.username이렇게 매번 inputs.붙이지 않아도 됨

 

inputs[name] = value; (x)
setInputs({ (o)
  ...inputs,
  [name]: value
});

세팅할때는 위와 같이 해야함

반응형
저작자표시

'react' 카테고리의 다른 글

react에 css 파일 import할때 css파일내에 문법에러있으면 import에러남  (0) 2024.01.11
왜 리액트는 대세가 되었을까? DOM관리불필요,유지보수,생산성  (0) 2024.01.11
[React.memo, useCallback]렌더링최적화 - component단위로 가능  (0) 2024.01.10
useMemo: 값 재사용(rerender할때마다 초기화하지 않고 기억해두고 사용), useCallback: 함수 재사용  (0) 2024.01.10
re-render의 개념, localStorage.setItem(key,value), useEffect(()=>{},dependencies?)  (0) 2023.12.20
반응형

리액트 컴포넌트는 기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 됩니다. 바뀐 내용이 없다 할지라도요.

물론, 실제 DOM 에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당합니다. 하지만, Virtual DOM 에는 모든걸 다 렌더링하고 있다는 겁니다.

나중에는, 컴포넌트를 최적화 하는 과정에서 기존의 내용을 그대로 사용하면서 Virtual DOM 에 렌더링 하는 리소스를 아낄 수도 있습니다. 이것은 다음번에 알아볼게요. -> useCallback, React.memo 사용

 

아래와 같이 component를 React.memo로 감싸주고 useCallback사용해야함

export default React.memo(CreateUser);

https://react.vlpt.us/basic/19-React.memo.html

 

19. React.memo 를 사용한 컴포넌트 리렌더링 방지 · GitBook

19. React.memo 를 사용한 컴포넌트 리렌더링 방지 이번에는, 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수에 대해

react.vlpt.us

 

반응형
저작자표시

'react' 카테고리의 다른 글

왜 리액트는 대세가 되었을까? DOM관리불필요,유지보수,생산성  (0) 2024.01.11
최적화: 비구조화(구조분해, destructuring) 할당을 통해 state갯수 줄이기  (0) 2024.01.11
useMemo: 값 재사용(rerender할때마다 초기화하지 않고 기억해두고 사용), useCallback: 함수 재사용  (0) 2024.01.10
re-render의 개념, localStorage.setItem(key,value), useEffect(()=>{},dependencies?)  (0) 2023.12.20
react-intl (international, 다국어 관련)  (0) 2022.08.02
반응형

어떤 컴포넌트에 a,b,c,d,....등 많은 state가 있고

어떤 값 (m)은 a의 유효 count를 세는 등 a가 바뀔때만 영향받는 값

const countActiveList = (a) => a.filter(n => n.active).length;

const count = countActiveList (a);

그냥 위와 같이 쓰면 a, b, c, d 각각이 바뀌어도 virtualDOM 리렌더가 일어나며 리렌더될때마다 m값은 매번 새로 계산됨

이것을 방지하기 위해 useMemo사용

const m = useMemo(()=> countActiveList (a),[a])

 

  • 화면이 랜더링될때마다 일반 변수는 계속 초기화되는데, 기억해 두어야 할 필요가 있을 때 사용
  • 기억해야 하는 값이긴 하지만 화면에 직접 나타나진 않을 때 useState대신 useMemo사용

 

useMemo가 값 재사용이라면 useCallback은 함수재사용

const onRemove = id => {
  // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
  // = user.id 가 id 인 것을 제거함
  setUsers(users.filter(user => user.id !== id));
};

=>

const onRemove = useCallback(
    id => {
      // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
      // = user.id 가 id 인 것을 제거함
      setUsers(users.filter(user => user.id !== id));
    },
    [users]
  );
반응형
저작자표시

'react' 카테고리의 다른 글

최적화: 비구조화(구조분해, destructuring) 할당을 통해 state갯수 줄이기  (0) 2024.01.11
[React.memo, useCallback]렌더링최적화 - component단위로 가능  (0) 2024.01.10
re-render의 개념, localStorage.setItem(key,value), useEffect(()=>{},dependencies?)  (0) 2023.12.20
react-intl (international, 다국어 관련)  (0) 2022.08.02
react component: class vs function  (0) 2022.05.26

+ Recent posts

티스토리툴바