React.js

이번 포스팅은 리액트의 함수형컴포넌트에서의 UseRef 를 다루어보려 합니다. 현재 프론트엔드를 공부중이고 자바스크립트와 리액트를 병행하여 시작하고 있는데요, 아직 주니어도 못되는 수준이라서 틀린 부분에 대해서는 댓글로 알려주시면 감사하겠습니다^^ UseRef us

리액트는 MVC 중 View만 신경쓰는 라이브러리 특정 부분이 어떻게 생길지 정하는 선언체는 컴포넌트 사용자화면에 뷰를 보여주는 행위는 렌더링 초기렌더링과 리렌더링 초기렌더링은 render 함수 render(){...} 컴포넌트가 어떻게 생겼는지 정의하는 함수 html

이제 본격적으로 리액트에를 알아보려고 합니다. 리액트 문법인 JSX를 소개합니다.리액트에서 사용하는 자바스크립트의 확장문법, JSX문법은 정식적인 자바스크립트 문법은 아닙니다.이런 형식으로 작성한 코드는 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용

필자는 공부를하는 학생이기에 클래스형 컴포넌트로 어느정도 익히고 함수형으로 넘어갈 생각입니다.리액트 컴포넌트는 두가지 형태가 있습니다클래스형 컴포넌트state 와 life cycle 함수를 사용할 수 있다.함수형 컴포넌트render 함수가 필요없고, 컴포넌트 마운트속도

클래스형 컴포넌트와 함수형 컴포넌트의 State props 부모 컴포넌트에서 설정된 값이며, 직접적인 변경이 불가능합니다. ( 불변성 ) Immutable Data 즉, 변하지 않는 데이터입니다. State 컴포넌트 내부에서 관리되는 값을 의미하며, 변경이 가능하고

사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 이벤트라고 합니다.주의사항이벤트 이름은 카멜 표기법으로 작성합니다onClick, onKeyUp 등이벤트 실행은 함수를 전달합니다DOM 요소에만 사용할 수 있습니다.이벤트 종류ClipboardComposition

HTML 에서 특정 DOM 요소에 ID를 달아서 식별하는것처럼 리액트의 JSX 에도 같은 기능이 있습니다. 바로 ref 인데요, 그럼 JSX 내에서 id를 사용할 수 없냐? 그렇지 않습니다. 하지만 권장하지 않습니다.ref 컴포넌트 내부에서만 참조가 가능합니다.id 전

컴포넌트 내부에 반복되는 DOM 요소가 있다면 일일히 작성하기 번거롭습니다. 또한 동적인 요소라면 절대 관리가 불가능합니다. 할 일 목록을 만들었다고 가정하면, 생성되었다 삭제되는 내용을 일일히 만들어줄수는 없으니까요. map() 을 이용한 반복 자바스크립트 배열의

다들 즐거운 한가위 보내셨나요? 풍요로운 명절동안 살만 디룩디룩찌고 공부는 잠시 손을 놓았습니다. 새로운 마음으로 다시 시작합니다! useState 가장 기본적인 Hook, 함수형 컴포넌트에서 동적인 값을 상태 라고 칭합니다. useState는 이러한 상태를 관리합니

컴포넌트 스타일링에는 3가지 종류가 있습니다. 일반 CSS CSS Module Styled-Component 일반 CSS Css 파일을 만들어서 일반적으로 알고있는 Css스타일링을 합니다. 사용하고 싶은 Css 파일을 import 합니다. JSX 네이밍 컴포넌트

CSS 파일을 불러와서 사용할 때, 클래스 이름을 고유한 값의 형태로 자동으로 만들어서 클래스명의 중복을 방지해주는 기술입니다.파일명\_클래스명\_해시값 의 형태로 만들어줍니다.파일명.module.css 확장자로 저장하기만하면 적용됩니다.모듈화 된 CSS 파일은 파일을

styled-component 를 배우기전에 ES6의 템플릿 리터럴 문법을 알고넘어가려 합니다. 템플릿 리터럴 위와같이 사용이 가능한데, 객체나 함수를 출력하면 어떻게될까요? 위 문법을 이해하셨다면 이제 리액트 스타일링의 꽃인 Css-in-Js에 관해 포스팅하려고

화면에서 사용하는 컴포넌트의 갯수가 많아지고, 한 번의 이벤트에 리렌더링되는 컴포넌트가 많아질수록 성능은 안좋아지게 됩니다. 체크를 할때마다 모든 리스트 아이템이 리렌더링 된다고 생각하면 어떤가요 즉각적인 반응이 오지않고 지연이 발생하게 됩니다. 할 일 버튼 클릭

이번 포스팅에서는 리액트 불변성을 유지해주는 라이브러리인 immer에대해 적어보려 합니다.객체나 배열의 구조가 복잡해진다면, 관리하는 상태를 업데이트하는 방법또한 복잡해지게 되는데. 이 때 immer 를 사용하면 불변성을 유지시켜줍니다.예시위 코드의 불변성을 지켜내려면

라우팅이란?웹애플리케이션에서 라우팅이란 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다.소규모 프로젝트는 하나의 페이지로도 충분하지만, 프로젝트의 사이즈가 커질수록 페이지를 분리해야합니다.게시판을 예를들어볼까요?Write : 게시글 작성 페이지L

리액트 프로젝트에서 전역적으로 관리할 상태가 있다면 최상위 컴포넌트에 상태를 선언하고 그 상태를 변경할 함수를 Props로 전달하곤 했습니다.프로젝트 크기에따라 컴포넌트 갯수는 비약적으로 늘어날 수 있는데, 그렇다면 최상위 컴포넌트에서 계속해서 Props를 이용하여 하

State상태는 애플리케이션의 데이터를 나타내며, 스토어에 저장됩니다. 리덕스의 핵심 목적은 이 상태를 중앙에서 관리하고 예측 가능하게 만드는 것입니다.Action상태 변경의 종류를 나타내는 객체, 일반적으로 type 속성을 포함하고 추가 데이터를 담을 수 있다. ty

redux-action 라이브러리액션 생성함수를 가독성 좋게 작성할 수 있다.리듀서 작성시 swicth/case 문 대신 handleActions 함수를 사용하여 가독성 좋게 작성할 수 있다.라이브러리 설치필요한 함수 임포트액션 생성함수리듀서 함수객체의 key를 \[]

Redux 저장소는 비동기 논리에 대해 아무것도 모릅니다. 동기적으로 작업을 전달하는 방법, 루트 리듀서 함수를 호출하여 상태를 업데이트하는 방법, 변경된 내용을 UI에 알리는 방법만 알고 있습니다. 모든 비동기성은 저장소 외부에서 발생해야 합니다. 앞서 우리는 Re

리액트로 프론트엔드 개발을 하고 있다면 Presentational & Container 디자인 패턴에 대해 들어보셨을 것이라고 생각합니다. >그렇다면 왜 이런 디자인 패턴을 사용해야 하는지도 알고 계신가요? 오늘은 왜 사용하는지에 대해 이야기해 보려고 합니다. Pre

리액트의 useState 훅은 리액트 프로젝트에서 화면에 렌더링되는 변경 가능한 데이터를 출력할 때 사용합니다.useState 함수는 어떻게 작동하는지 알아봅시다.number : 화면에 표시할 값setNumber : 값을 업데이트 하는 함수이와 같이 선언하여 사용할 수

React에서 사용하는 JSX 문법의 일종으로 컴포넌트를 부모-자식 관계로 표현하는 것입니다.부모-자식으로 설정된 컴포넌트 관계에서 부모 컴포넌트는 props 객체에 children 속성으로 접근할 수 있습니다.⭐️ children은 반드시 JSX만 전달해야 하는것은

라이프사이클이란? 라이프사이클 ( 생명주기 ) 리액트에서 말하는 라이프사이클이란 개발자가 리액트의 컴포넌트를 보다 정밀하게 통제할 수 있도록 컴포넌트가 처음 생성되고 제거되기까지의 과정을 분기해둔 것입니다. >클래스형 컴포넌트의 생명주기는 위와 같은 형태로 분기되어

최적화란? 최적화란 웹 서비스의 성능을 개선하는 모든 행위를 일컫습니다. 즉, 간단한 연산에서부터 어떤 라이브러리를 사용할지와 프로젝트의 아키텍처까지 모두 포함됩니다. 서버 응답속도 개선 이미지, 폰트 등 정적 파일 로딩의 개선 불필요한 네트워크 통신 횟수 제한 등