# reactjs

44개의 포스트
post-thumbnail

📜 reactjs 공식 문서 읽기 - Main Concepts 1~4

지속적으로 참고하고 싶은 리액트의 철학적인 내용을 정리하는 것이 목표가장 간단한 React 예제 선천적으로 렌더링 로직은 다른 여러 로직들과 연결이 되어있다. (이벤트 관리, 시간에 따른 state 변화, 데이터 준비 상황 등) React는 이 사실을 포용하는 의미에서

2020년 6월 28일
·
0개의 댓글

Immer

React 컴포넌트의 state를 변경해야 할 땐, 무조건 불변성을 유지해야한다.업데이트 하는 과정에서 기존의 객체의 값을 직접 수정하면 안된다.객체 구조가 깊어질수록 불변성을 유지하면서 수정하기가 어렵다.immer는 불변성을 유지해주는 라이브러리입니다. produce

2020년 6월 23일
·
0개의 댓글

Redux #2

기존 방식으로 Redux를 사용하는 경우 mapStateToProps를 이용해서 props내 state를 정의하고, connect를 이용해서 props를 바인딩하는 복잡한 행동을 해야한다.하지만 react-redux의 useSelector와 useDispatch라는 h

2020년 6월 23일
·
0개의 댓글
post-thumbnail

Redux #1

상위 컴포넌트로부터 하위 컴포넌트까지의 상태값의 효율적인 전달을 위해서 Context Api를 사용한다. 하지만 앱의 규모가 커지면 커질수록 컴포넌트의 개수와 데이터 개수가 늘어남에 따라 코드도 복잡해지고 길어진다. 이를 해결하기 위해 상태값을 중앙화 시켜 유지관리하기

2020년 6월 23일
·
0개의 댓글
post-thumbnail

Context API

주로 어플리케이션에서 전역적으로 데이터가 사용되야 할 때 사용한다. 여러 컴포넌트를 거쳐서 값을 전달하는 것이 아니라 Context를 통해서 원하는 값이나 함수를 전달할 수 있따.Context는 createContext 함수를 사용해서 만들며, 함수를 호출하면 Prov

2020년 6월 23일
·
0개의 댓글

Hook #3

컴포넌트를 작성하다 DOM을 직접 다루어야 하는 경우나 렌더링 이후 업데이트 된 상태를 바로 조회해야할 경우 useRef를 사용한다.이 변수를 사용하여 다음과 같은 값을 관리한다.setTimeout, setInterval을 통해서 만들어진 id외부 라이브러리를 사용하여

2020년 6월 22일
·
0개의 댓글
post-thumbnail

Boiler-plate

ReactJS와 NodeJS를 사용해서 Boiler-plate를 만들어 보았다.

2020년 6월 22일
·
0개의 댓글

Hook #2

자바스크립트의 6가지 타입 중 객체를 제외한 원시 값들은 참조 값이 아닌 값 자체를 새로 할당한다. 따라서 값이 변경되면 서로 다른 값을 가지게 된다.반면 참조 타입인 객체는 하나의 값이 변경되면 다란 하나의 값도 동일하게 변경된다. 또한, 참조 타입은 동일 참조 값이

2020년 6월 22일
·
0개의 댓글

Render Props

컴포넌트는 React에서 코드의 재사용성을 위해 사용하는 주요 단위입니다. 하지만 컴포넌트에서 캡슐화된 상태나 동작을 같은 상태를 가진 다른 컴포넌트와 공유하는 방법이 항상 명확하지 않다.컴포넌트 안에서 사용된 행위를 다른 컴포넌트에서 재사용하려면 render prop

2020년 6월 22일
·
0개의 댓글

Composition

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없다. 이러한 컴포넌트에서는 childeren prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달한다.흔하지 않지만 컴포넌트에 여러 개의 구멍이 필요할 수도 있습니다. 이런 경우에는 children 대

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

이벤트 핸들링

React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야한다.DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될 때

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

클래스형 컴포넌트

클래스형 컴포넌트에서는 render() 메서드가 있어야한다. render() 메서드에서 렌더링하고 싶은 JSX를 반환한다. defaultProps를 사용하여 props의 default 값을 설정한다.this 키워드를 사용하려면 생성자 함수 안에 super(props)를

2020년 6월 18일
·
0개의 댓글

컴포넌트와 Props

Component는 UI가 어떻게 보여야하는지 정의하는 React element를 output으로 하는 함수. 함수형과 클래스로 정의할 수 있음.React가 사용자 정의 컴포넌트로 작성한 element를 발견하면 JSX attribute와 자식을 해당 Component

2020년 6월 18일
·
0개의 댓글

JSX

JSX란 javascript를 확장한 문법으로써 React element를 생성하기 위해 사용됨.기본적으로 React element에는 HTML 태그가 포함되어 있고 문자열도 포함되어 있음.JSX이 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있음J

2020년 6월 18일
·
0개의 댓글
post-thumbnail

[ReactJS 이론] #4 How to handle Event

In javascript, Class method isn't binded to class. So we have to bind class method by using bind() method. Like below.When we call "callback function"

2020년 5월 26일
·
0개의 댓글
post-thumbnail

[ReactJS 이론] #2 Components and Props

내용 React component can be divided to many pieces and we can look into them individually. It is similiar to javascript function. It receive input call

2020년 5월 25일
·
0개의 댓글
post-thumbnail

[ReactJS 이론] #3 State and Lifecycle

We have to define class component not function component to use "state" and "lifecycle method."Here's a example.To understand this code, we need look

2020년 5월 25일
·
0개의 댓글
post-thumbnail

[ReactJS 이론] #1 Element Rendering

이 안에 들어가는 모든 엘리먼트는 React DOM에서 관리하기 때문에 이것을 루트 DOM 노드라고 한다.So, we can use ReactDOM.render() to transfer reactDOM TO root DOM node.The only thing we ca

2020년 5월 25일
·
0개의 댓글
post-thumbnail

react-js로 웹 서비스 만들기 4

render() => mount => componentDidMount()의 과정을 따라,아래와 같이 1번 캡쳐의 내용이 3초간 화면에 표시된 이후에 2번 캡쳐의 내용이 뜬다.1\. 2\. 왜 render 뒤에 mount를 하는데 render 내용대로 반영이 될까?이건

2020년 5월 21일
·
0개의 댓글

<study> ReactJS

If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses. (무조건 다른걸로 하나뿐인걸로) const theExample =

2020년 5월 20일
·
0개의 댓글