# reactjs

ktseo41

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

boh001

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

boh001

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

boh001

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

boh001

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

boh001

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

blair

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

boh001

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

boh001

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

boh001

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

boh001

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

boh001

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

boh001

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

boh001

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

y1andyu

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"

y1andyu

내용 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

y1andyu

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

y1andyu

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

tera_geniel

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

claire-euni

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