[Front-end] React / Redux

React > Component라는 개념에 집중하고있는 프론트엔드 프레임워크 Component 하나의 의미를 가진 독립적인 단위 모듈 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. JSX 자바스크립트의 확장 문법,

React.Component를 확장하는 동일한 이름의 ES6 class를 생성render()라고 불리는 빈 메서드를 추가함수의 내용을 render() 메서드 안으로 이동render() 내용 안에 있는 props를 this.props로 변경남아있는 빈 함수 선언을 삭제r

특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것을 의미함React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다.사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 보여주는 Greeting 컴포넌트를 만든다.isLoggedIn pr

React 컴포넌트는 인간의 인생과 닮았다고 한다 💁🏻‍♀️인간의 삶과 같이 컴포넌트에도 생명주기라는 것이 있는데, 컴포넌트의 생명주기 다이어그램은 아래와 같이 생겼다.중요한 일이 생길 때 마다 render를 통해 렌더링 하게 되는데, 컴포넌트에게 중요한 일이란1\

상태 끌어올리기현재 상태를 가지고 있는 컴포넌트로부터, 그 컴포넌트에 가장 가까운 부모 컴포넌트에게 State를 끌어 올린다각각 다른 컴포넌트가 State를 각자 가지고 있는데, 이 상태 끌어올려 부모 컴포넌트에서 통합하고 관리하겠다는 뜻이 담겨있다. 그렇게 관리하면

Hook은 React 16.8에 새로 추가된 기능이다.Hook은 클래스형 컴포넌트로 작성하지 않아도(함수형 컴포넌트에서도) state와 다른 React의 기능들을 사용할 수 있게 해준다.Recast.ly+ajax 과제 까지는 hooks를 배우기 전이여서 state를 사

지금은 현재 버튼을 눌러도 아무런 작동을 하지 않는다.이것을 상태로 바꿔서 버튼을 누를 때 마다 현재 보이는 값이 변하도록 hooks 중 useState를 사용하여 수정해보도록 하자.끝이다.진짜 간단하다..import에 { useState }를 적어 사용하게끔 해놓고,

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너기존 React에서는 형제 컴포넌트 간에 데이터를 주고 받을 때, 부모 컴포넌트를 통해서 주고 받았다.간단한 로직이라면 몰라도 컴포넌트가 많아지게 된다면 상태관리가 매우 복잡해진다.이런 복잡성을 줄이기 위해서

DOM을 조작하고 싶을 때 사용하는 것.DOM에 접근하여 DOM API를 사용할 수 있게 해준다.useRef 사용법은 아주 간단하다.만약에 위처럼 생긴 두개의 Input 박스가 있고, 값을 모두 채운 다음 초기화 버튼을 눌렀을 때 이름 Input 박스로 포커스가 맞춰지

hook 함수 중 하나로 리액트 컴포넌트가 처음 화면에 나타나게 될 때 / 화면에서 사라지게 될 때 어떤 특정 작업을 할 수 있고, 컴포넌트에 어떤 props나 state가 바뀌어서 업데이트 될 때에도 어떤 작업을 할 수 있고, 업데이트 되기 전에도 할 수 있다. 리렌

useRef로 특정DOM 선택할때만 사용하는 줄 알았는데, 내가 개발하면서 애매했던 순간들에 유용하게 사용할 수 있는 녀석이었다!useState로 관리하기엔 상태를 바꾸면 컴포넌트가 리렌더링되고, 그냥 변수를 선언해서 사용하면 다음 리렌더링 될 때 변수값이 초기화되고.