React 입문

최근들어서 Angular, Vue.js, React.js는 삼대장으로 불리며 가장 많이 각광받고 있는 프론트엔드 언어입니다.그 중에 리액트는 페이스북에서 제공해주는 프론트엔드 라이브러리입니다.위의 프레임워크들은 MVC 패턴 또는 MVVM등의 패턴으로 애플리케이션을 구조

props란 부모 컴포넌트에서 자식 컴포넌트로 값을 전달해주는 것을 의미합니다.image예를 들어서, MyName이라는 컴퍼넌트를 만들고, 부모 컴퍼넌트인 App에서 props의 값을 HTML로 보여준다고 하면 코드는 아래와 같습니다.아래 App 컴포넌트에서 <M

이전에 배웠던 Props는 부모 컴포넌트에서 자식 컴포넌트로 특정 원하는 값을 내려주어 렌더링 하는 방식이라면 state는 말 그대로 컴포넌트 내부에서 가지고 있는 상태 값입니다. Props는 읽기 전용이지만, state는 컴포넌트에서 언제든지 변경이 가능합니다.간단하

LifeCycle API는 컴포넌트가 브라우저에 나타날 때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 입니다.컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API들이 있습니다.위 코드는 컴포넌트 생성자 함수입니다. 컴포넌트가 새로 만들어질 때마다 이 함수

리액트에서 form 태그 안에 input 태그들을 넣은 후 , 값을 입력하는데 이러한 값들의 상태를 관리하는 방법에 대해서 살펴보겠습니다.아래 이름과 전화번호를 input 태그 안에 입력 후 컴포넌트의 상태 값에 동기화 해주는 에제 코드를 작성하였습니다.ReactJS

PhoneForm Component에 있는 안에 들어 있는 값을 App 부모 컴포넌트가 관리하고 있는 배열에 데이터를 삽입하는 예제 코드를 작성해보았습니다.위 코드에서 render() 함수에서 PhoneForm 컴포넌트의 onCreate에 App 컴포넌트의 handl

Hooks는 React v16.8에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게