리덕스란? 리액트 상태 관리 라이브러리로 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있습니다. 리덕스 왜 쓸까? 예를 들어 아래와 같은 TodoList 프로젝트가 있다고 가정해보면 대부분의 작업에서 부모 컴포넌트가 중간자 역할을 하게 됩니다. 컴포넌트끼리 직접 소통하는 방법이 있긴 하지만, 그렇게 하면 코드가 꼬여버리기 때문에 권장하지 않는 방법이다. 이런식으로 App 컴포넌트를 거쳐서 건너건너 필요한 값을 업데이트하고, 리렌더링 하는 방식으로 프로젝트가 개발되면 부모 컴포넌트에서 모든걸 관리하고 아래로 내려주..

React의 컴포넌트에서 상태의 불변성을 유지하는 것은 매우 중요합니다. 불변성은 기존 값을 직접 수정하지 않으면서 새로운 값을 만들어내는 것을 의미합니다. 따라서 배열이나 객체의 값을 변경할 때는 새로운 배열이나 객체를 만들어 필요한 부분을 변경해주어야 합니다. 불변성이 유지되지 않으면 값이 변경되어도 감지하지 못하게 되고 렌더링 성능을 최적화하지 못하는 문제가 발생합니다. 위의 불변성에 대한 정의로, 우리는 불변성을 지키기 위해 필요한 값을 변형해 사용하고 싶다면 어떤 값을 복사본을 만들어 사용해야 합니다. const user = { name: 'Yeum', age: 25 }; const copyUser = user; // user와 copyUser 변수에는 같은 참조값 즉, 같은 힙 영역의 메모리를..

6. PropTypes props구성 요소에는 React에서 호출되는 많은 특정 속성이 있으며 모든 유형이 될 수 있습니다. 때때로 이러한 props를 검증하는 방법이 필요합니다. 사용자가 구성 요소에 아무 것도 입력할 수 있는 자유를 원하지 않습니다. React에는 이에 대한 솔루션이 있으며 이를 PropTypes라고 합니다. class MyTitle extends React.Component { static propTypes = { title: PropTypes.string.isRequired, } render() { return {this.props.title} ; } } 위의 구성 요소 MyTitle에는 title있습니다. PropTypes는 제목이 필수이고 값이 문자열(PropTypes.stri..

1. Render JSX React의 템플릿 구문을 JSX라고 합니다. JSX에서는 HTML 태그를 JavaScript 코드에 직접 넣을 수 있습니다. ReactDOM.render()는 JSX를 HTML로 변환하고 지정된 DOM 노드로 렌더링하는 메소드입니다. 실행결과 2. JSX에서 자바스크립트 사용하기(Use JavaScript in JSX) JSX에서 JavaScript를 사용할 수도 있습니다. HTML 구문의 시작으로 꺾쇠 괄호( < )를 사용하고 JavaScript 구문의 시작으로 중괄호( { )를 사용합니다. Tips. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map map() 메서드는..

리액트에 대해서는 개인적으로 생활코딩님의 강의를 정독한 이후로 실무에서는 VUE만 사용하다보니 손놓은지 오래되었는데 간만에 리액트를 구현할 일이 생겨 간단하게 구현했다가 애를 먹은 상황을 공유하고자 합니다. 원하는 상황은 이렇습니다. 경로 /에서 /about경로로 갈때에 지연시간을 걸어 오래동안 대기를 하는 상황을 의도적으로 만들어 대기시간을 발생시키도록 합니다. 여기서 필요한 것은 리액트에 내장되어 있는 함수인 lazy, Suspense를 사용합니다. 그럼 lazy와 Suspense가 무엇인가에 대해 알아보자 React.lazy React.lazy는 코드를 분할하게 해줍니다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 앱 사용자들에게 획기적인 성능 향상을 하게 합니다. 앱의 코드 양을 줄이지 않고도 ..