profile
developer

상태관리 라이브러리

상태관리 React에서는 주로 useState를 사용해 데이터를 다룬다. 상태관리를 통해 우리는 데이터관리를 효율적으로 할 수 있다. 상태로는 크게 지역상태와 전역상태로 나누어 볼 수 있다. 지역상태 props를 사용해 상위컴포넌트에서 하위 컴포넌트로 데이터를 넘겨주

2022년 6월 19일
·
0개의 댓글
·

class / function component

React에서 컴포넌트를 사용하는 방식에는 클래스형과 함수형 두 가지가 있다. 과거에는 클래스형 컴포넌트를 더 많이 사용했지만 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)이 지원되면서 현재에는 함수형 컴포넌트를 더 많이 사용하는 추세이다.hook이 지원되면서

2022년 6월 6일
·
0개의 댓글
·

useRef와 useEffect

useRef는 저장공간(변수), DOM요소에 접근하기 위해 사용되는 React Hooks 중 하나이다. useRef에서의 Ref는 참조(reference)를 뜻한다.React에서 우리는 주로 useState를 이용해 변수를 선언하고 사용한다. useState의 경우 상

2022년 6월 5일
·
0개의 댓글
·

React 컴포넌트 생명주기

컴포넌트 생명주기 react에서 모든 컴포넌트는 여러 종류의 생명주기 메서드를 가진다. 우리는 이 메서드를 이용해 특정 시점에 코드가 실행되도록 설정할 수 있다. 컴포넌트의 수명은 페이지에 렌더링되기 전 준비단계부터 시작하여 컴포넌트가 페이지에서 사라질때까지이다.

2022년 5월 31일
·
0개의 댓글
·
post-thumbnail

State Lifting - 상태 끌어올리기

React에서의 데이터 흐름은 부모->자식 형태의 단방향 흐름이다. 부모가 가진 변수나 함수를 props를 통해 자식에게 넘겨줄 수 있다. 따라서 부모 컴포넌트 안에 자식 컴포넌트가 두 개 이상 있는 경우 자식 컴포넌트 간의 변수, 함수 공유는 불가능하다. 단방향 데이

2022년 5월 29일
·
0개의 댓글
·
post-thumbnail

React State & props

state vs props state와 props(properties)는 자바스크립트에서 사용되는 객체이다. state와 props는 모두 렌더링 결과물에 영향을 주는 데이터를 갖는다. state와 props의 가장 큰 차이로는 state는 컴포넌트 안에서만 관리되는

2022년 5월 23일
·
0개의 댓글
·

JSX

JSX란? JSX(JavaScript eXtension)은 JavaScript의 확장 버전이다. HTML문법을 JavaScript 코드 안에 작성하며, React에서 HTML 코드를 작성할 때 JSX를 사용한다.

2022년 5월 22일
·
0개의 댓글
·
post-thumbnail

조건부 렌더링(Conditional-rendering )

조건부 렌더링은 애플리케이션의 상태에 맞춰 보여주어야 하는 몇개의 컴포넌트만을 렌더링하여 화면에 그려주는 것이다.예를 들어 로그인이 되어있을 때와 로그인이 되어있지 않은 상태에 맞춰 다른 컴포넌트를 렌더링하여 다른 화면을 보여준다.로그인 상태가 ture인 경우 User

2022년 5월 22일
·
0개의 댓글
·
post-thumbnail

Container-Persentation Pattern

개발자에게 유지보수에 용이한 코드를 작성하는 것은 매우 중요하다. 한 페이지에 기능을 담당하는 자바스크립트 코드와 UI를 그리는 html코드를 모두 작성하면 코드가 길어지기 때문에 유지보수 측면에서 어려움이 있다. 따라서 작성 시 한 페이지에 70~100 줄 정도의 코

2022년 5월 16일
·
0개의 댓글
·
post-thumbnail

React 변수 state 이해하기.

변수 state component란? UI 또는 기능을 부품화해서 재사용이 가능하게 하는 것. 같은 코드를 여러번 복사 붙이기? component는 main이 되는 원본을 두고 필요에 의해 import 하여 사용하게된다. 따라서 속성을 한번에 바꿔야 하는 경우 원본

2022년 5월 10일
·
0개의 댓글
·