생각하는 아이들

훅(Hook)이란? State 를 이용하여 렌더링에 필요한 데이터를 관리하게 되는 것을 살펴 보았다. 클래스 컴포넌트에서는 생성자에서 state를 정의 하고 setState 함수를 통해 state 를 업데이트 하게 된다. 하지만 기존 함수 컴포넌트는 이러한 state를 정의해서 사용하거나 컴포넌트 생명주기에 맞춰 실행 되도록 할 수 없기 때문에 나온것이 바로 훅(Hook) 이다. Hook 이란 갈고리 라는 뜻을 의미하는데 보통 프로그래밍에서 '원래 존재하는 어떤 기능에 갈고리를 거는 것 처럼 끼어 들어가 같이 수행하는 것' 을 의미한다. 마찬가지로 리액트에서도 'state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행 되도록 만든 것'이다. 이러한 훅의 이름은 모두 use 로 시작한다..

State란 State는 상태라는 의미를 가지고 있다. 즉 리액트 컴포넌트의 상태를 의미한다. State를 정의할 때 중요한 점은 '렌더링이나 데이터 흐름에 사용되는 값만 state 에 포함시켜야 한다.' 이 이유는 state 가 변경 될 때마다 컴포넌트가 재 렌더링 되기 때문에 데이터 흐름과 관련이 없는 값을 포함하면 의미 없는 경우에 재렌더링 되고 성능 저하가 나타날 수 있다. State 특징 리액트의 state 는 자바스크립트 객체이다. class Hello extends React.Component{ constructor(props){ super(props); this.state ={ liked:false }; } } 여기서 constructor 는 생성자를 의미하며 Hello 객체가 생성될 때 ..

컴포넌트란 리액트는 컴포넌트 기반의 구조라는 특징을 알아 보았는데 여기서 컴포넌트가 무엇인지 살펴보면 다음과 같다. 자바스크립트 함수 - (입력 -> 처리 -> 출력) 리액트 컴포넌트 -(입력 -> 처리 -> 출력) 과 같이 자바스크립트의 함수와 같은 유형으로 처리가 된다. 따라서 리액트 컴포넌트를 그냥 함수라고 이해하면 좀 더 쉽게 이해 할 수 있다. 하지만 여기서 자바스크립트 함수와 다른 부분이 있는데~ 자바스크립트 함수는 입력이 매개변수인데 반해 리액트의 입력은 Props 이다. 또한 출력 결과가 리액트의 출력은 리액트 엘리먼트이다. 즉 '어떤한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성해서 리턴해 주는것' 이다. Props란 Props는 prop가 여러개인 것을 의미한다. 여기서 ..

Element 란 요소,성분 이라는 뜻을 가지고 있다. 여기서 react 의 엘리먼트는 리액트 앱을 구성하는 요소를 의미한다. 리액트 앱은 Virtual DOM을 사용한다고 했다. 따라서 react의 엘리먼트는 DOM 엘리먼트의 가상표현이라고 이해하면 된다. 엘리먼트의 생김새 리액트엘리먼트는 자바스크립트 객체 형태로 존재한다. 예를 들면 컴포넌트유형(버튼등)과 속성(color 등) 및 자식의 정보를 포함하는 일반적인 자바스크립트 객체이다. { type:'button', props:{ className:'bg-green', children:{ type:'b', props:{ children:'Hello!!' } } } } 위의 코드는 버튼을 나타내기 위한 리액트 엘리먼트이다. 위의 엘리먼트가 렌더링 된다면..

JSX란? A syntax extension to JavaScript 라는 의미를 가지고 있으며 문장을 해석해 보면 '자바스크립트의 확장문법' 이라는 뜻이다. JSX 는 JavaScript와 XML/HTML 을 합친 것이라고 보면 된다. JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치므로 JSX로 코드를 작성하면 최종적으로는 자바스크립트 코드가 나오게 된다. 여기서 JSX코드를 자바스크립트로 변환하는 역할을 수행하는 것이 리액트의 createElement() 라는 함수이다. 다음과 같이 index.js 파일을 수정해 보자. class Hello extends React.Component{ render(){ return Hello {this.props.toWha..

React 란 현존하는 자바스크립트 라이브러리 중에서 가장 많이 사용하고 있는 기술로 현업에서 중요한 기술 스택 중 하나로 자리 잡았고 프런트엔드 개발자를 채용하는 대부분의 회사에서는 리액트로 개발을 할 수 있는 사람을 원하고 있다. 리액트는 메타(구 페이스북)에서 만든 오픈소스 자바스크립트 UI라이브러리이다. 리액트의 장점은 빠른 업데이트와 렌더링 속도로 볼 수 있는데 빠른 업데이트를 위해서 내부적으로 Virtual DOM 이라는 것을 사용하며 업데이트를 해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트 하기 때문에 리렌더링이 잦은 동적인 모던웹에서 엄청나게 빠른 퍼포먼스를 발휘한다. 또한 컴포넌트 구조로 재사용이 편리하게 되어 있다. HTML 파일 대신에 JSX(JavaScript eXtensio..