망고

React Fragments React에서 컴포넌트가 여러 엘리먼트를 반환하도록 사용하는 것이 일반적인데, Fragment는 DOM에 의미 없는 div를 사용하지 않고 여러 하위 노드들을 그룹화해서 사용할 수 있습니다! render() { return ( ); } 예를 들어 Table과 테이블 아래의 Column을 세팅해주는 컴포넌트가 있다고 가정합니다. class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( Hello World ); } } 이때 Table의 출력결과는 아래와 같이 나옵니다. Hello World 결과를 보면 tr 아래에..

3. state 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. Props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어주어야 한다. 예를 들어 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꾸어 주어야 값이 변경될 수 있는 것이다. 반면 myComponent에서는 전달받은 name 값을 직접 바꿀 수 없다. 리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state입니다. 3.1. 클..

1. 개념 React에서 자주 사용되는 Props와 State의 개념과 차이점입니다. Props란, 컴포넌트가 가지고 있는 프로퍼티로 자식 컴포넌트가 부모 컴포넌트로부터 값을 받고 싶을 때, props를 통해 받아올 수 있습니다. 일반 객체 지향에서 특정 function의 인자(parameter)로 생각하면 좋습니다. 위는 객체 데이터를 표시하거나 변경 사항등을 알리기 위해 사용되며 읽기전용이므로 값을 수정할 수 없다는 특징을 가지고 있습니다. State는 private한 속성을 지니며 컴포넌트에 의해 완전히 제어되고 있다는 특징을 가지고 있습니다. 즉, 컴포넌트 내부에서만 사용할 수 있는 속성인 것이고, Local State라고도 부릅니다 2. Props 우선 MyComponent 컴포넌트를 수정하여 ..

퇴사를 하고 vue개발자로 지내다가 이직을 준비해야 하는 시점에서 시간이 남을 때 리액트 공부를 해두는 것도 좋을 것 같다는 생각이 들어 리액트 사이드 프로젝트를 합류하게 되었다. 공부할 겸 정리하려고 한다. 1. 리액트란? 웹페이지에 인터렉션이 자주 발생하고, 동적인 UI를 기존의 Javascript만으로 표현하면 개발과 수정이 일어날때마다 DOM을 직접 수정해야 하기 때문에 메모리 누수와 코드가 난잡해지는 문제가 발생하곤 한다. 처리해야 할 이벤트들도 다양해지고, 관리해야 할 상태 값이나 DOM의 구조도 다양해지게 된다면 이에 따라 처리해야하느 ㄴ업데이트 규칙도 복잡해지기 마련이다. 이러한 문제점을 개선하기 위해 페이스북 개발팀에서 만든것이 바로 리액트이다. 페이스북 개발팀은 이를 해결하려고 어떤 데..