🧐
코드로 디자인하는 UI 개발자
  • 🥳Welcome!
  • Section
    • React
      • React Simple Summary
      • React.js?
      • Create React App
      • Components
      • Virtual DOM
      • Class Component, Function Component
      • state, setState
      • Ref
      • self closing element(tag)
      • React Hooks
      • useEffect(), useLayoutEffect()
      • Deployment
      • react assets images path dynamic binding - require()
      • PostCSS
      • Dynamic Tag Name Props
    • Vue
      • Vue Simple Summary
      • v-bind
      • ::v-deep 딥셀렉터
      • Dynamic Components (동적 컴포넌트), :is attribute
        • 후속편(after that...)
      • vue assets images path dynamic binding - require()
      • Computed vs Watch vs Methods
      • v-if VS v-show
      • v-for 와 v-if 동시사용
      • self closing element(tag)
      • data functiuon - Function Declarations VS Arrow Function
      • invalid-first-character-of-tag-name.
    • JavaScript
      • Array Methods
        • some() VS every()
      • Data Type Variable
        • Object Type Spread Syntax
      • try...catch...finally and throw
      • argument와 parameter 차이점
      • Throttle, Debounce
      • framework and library
  • HTML, CSS
    • CSS Simple Summary
    • word-wrap VS overflow-wrap 그리고 word-break
    • self closing element(tag)
    • position: fixed 관련 특징 및 이슈
    • BFC 블록 포멧팅 컨텍스트
  • Accessibility
    • Anchor 요소에서 Title 속성사용이 Accessibility(접근성)에 좋다고?
  • UXI
    • 모바일 최소 터치 영역(Mobile Touch Area)
    • Skeleton UI (스켈레톤)
Powered by GitBook
On this page
  1. Section
  2. React

React Simple Summary

간단한 개념 및 관련 공식 문서 또는 참고 링크

PreviousReactNextReact.js?

Last updated 2 years ago

React

  • 컴포넌트들로 만들어진 UI 라이브러리

framework and library

  • 프레임워크는 이미 완성품으로 정해진 롤대로 사용 해야 합니다. 예로 앵귤러

  • 라이브러리는 내 입맛에 맞게 기능을 골라서 사용 할 수 있습니다. 예로 리액트

Components

  • 독립적, 고립적, 재사용성, 복잡하고 긴 로직을 작게 분리

Virtual DOM

  • 상태가 변경되면 이전에 저장된 돔트리와 비교해서 실제 업뎃되어야 하는 부분만 모아서 다시 렌더링 한다.

props

  • 부모로부터 전달된 프로퍼티이고 읽기 전용

  • 상황에 따라 주어진 데이터를 받고 그 데이터에 맞게 UI를 보여준다.

  • 재사용 높인다.

state

  • 컴포넌트에서 본인이 가지고 있는 데이터

  • 상태가 변경되면 render() 함수가 재실행된다.

라이프 사이클

  • 특정 시점에 코드가 실행되도록 설정하는 메서드

리액트 훅(Hooks)

  • 함수형 컴포넌트를 사용할 때 상태 및 라이프 사이클 관리할 수 있도록 도움.

JSX

  • 자바스크립트를 확장하여 사용한 문법으로 JS에서 html 문법을 사용함.

  • JavaScript이기 때문에 JS의 기능을 사용사용 하여 마크업 가능.

Ref

  • Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.

  • Ref

React 특징
framework and library에 관해
Components에 관해
Virtual DOM에 관해
React 공식 - props
React 공식 - State 라이프사이클
React 공식 - State
React 공식
Virtual DOM에 관해
React 공식
React 공식 - hooks 도입 이유
추가해서 볼만한 블로그 포스팅
React 공식 - JSX
추가해서 볼만한 블로그 포스팅
reactjs - refs