React

1. 리액트 시작 1-1. 왜 리액트인가 한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했다. 하지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가서 서버 사이드는 물론 모바일, 데스크톱

3. 컴포넌트 3-1. 컴포넌트 애플리케이션의 사용자 인터페이스를 설계를 할 때 사용자가 볼 수 있는 요소들은 여러 컴포넌트로 구성되어 있다. 컴포넌트는 단순한 템플릿 이상의 기능을 갖추고 있다. 데이터가 주어지면 UI를 구성 라이프사이클 API 이용 컴포넌트가 화면

3. 컴포넌트 3-3. state(상태) state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 리액트에는 두 가지 종류의 state가 있다. 클래스형 컴포넌트가 지니고 있는 state이 있고, 함수 컴포넌트에서 useState 함수를 통해 사용할 수도 있다.

컴포넌트를 선언하는 방식 두 가지는?클래스형 컴포넌트의 특징으로는 state 기능 및 라이프사이클 기능을 사용할 수 있고, () 함수를 반드시 필요로 한다.props은 컴포넌트 속성을 설정할 때 사용하는 요소로, ()에서 설정한다.state는 컴포넌트 내부에서 바뀔 수

웹 애플리케이션을 만들다 보면 코드를 반복하여 사용할 때가 있다. 반복적인 코드를 효율적으로 보여주고 관리하는 방법을 배워보겠다.자바스크립트 배열 객체의 내장 함수인 map함수를 이용해볼 수 있다. map 함수는 배열의 각 요소를 원하는 규칙에 따라 변환한 후, 그 결

자바스크립트에서 반복되는 컴포넌트를 렌더링하기 위해 사용하는 배열 객체 내장 함수는?key 값은 언제나 유일해야 한다. (O/X)key 값은 배열의 각 데이터가 가진 ( )으로 설정하는 것이 적절하다. 각 데이터의 ( )이 없을 때 ( )값을 사용하면 된다. 단 이 방

컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있지만, 이번에 다룰 스타일링 방식은 다음과 같다.일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식이다.Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드 작성을

앞선 단원에서 전개 연산자와 배열의 내장 함수를 사용하여 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓰는 것을 배웠습니다. 하지만 객체의 구조가 깊어진다면 불변성을 유지하면서 업데이트하는 것은 힘든 일입니다. 이러한 상황에 immer라이브러리를 사용해볼 수 있습니다.

리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는데 도움이 될 수 있습니다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 유용하며, 실제 업데이트가 필