Hooks는 리액트 16.8 버전에 신규로 추가된 기능이다. 클래스형 컴포넌트에서만 가능했던 state 및 다양한 기능을 코드작성 없이 라이브러리로 제공한다. 리액트에서는 클래스형 컴포넌트가아닌 함수형 컴포넌트에 훅을 사용하는것을 권장한다. 훅의 간단한 규칙이 있다. 최상위 컴포넌트에서만 호출 : 반복문 혹은 중첩된 함수 안에서 호출을 하게되면 버그가 발생할 수 있어 최상위 한개에서만 호출하는것을 권장한다. 이 규칙을 따르면 컴포넌트가 랜더링되는 순서대로 훅이 호출되는것을 보장한다. 리액트 함수 내에서만 호출 : 소스코드를 명확하게 하기 위해 일반 자바스크립트에서는 호출하지 않는다. 1. useState useState는 가장 기본적인 훅이다. 함수형 컴포넌트에서 상태를 관리해야할 일이 있으면 useSt..

1. State 변경 가능한 값 우리가 아는 데이터에 해당. 데이터 변경 시 화면이 새로고침 됨 state는 우리가 일반적으로 알고있는 변수와 비슷하다. 다음 예제에서는 카드색상을 원하는색으로 바꾸는 실습을 진행하겠다. 아래와 같이 파일을 생성한다. Label, Squere컴포넌트를 사용하는 Card 컴포넌트를 만들고. 해당 컴포넌트의 div에 쓰일 Crad.css를 만든다. 그리고 만들어진 Card 컴포넌트를 App.js에서 사용을 하면 아래와 같은 결과를 얻을 수 있다. 기본 구조를 가지고 버튼을 통해 state값을 컨트롤해 색상을 동적으로 보여주는 예제를 만들어보자. 이전에 state는 function에서 가질 수 없었다고 했지만, 이후 hook의 useState를 통해 함수형 컴포넌트에서도 sta..

화면에 값을 불러오고 표현하기 위한 값을 처리하는 방식에 대해서도 알아보자. 1. Props 불변하는 값 부모 컴포넌트에서 자식컴포넌트로 전달 한번 만들어진 데이터는 변경되지 않는다. 상태값이 없는 컴포넌트는 stateless component라고 부른다. 이런 상태값이 없는 컴포넌트는 스스로 데이터가 존재하지 않고 props 전달받아 처리하게 된다. 이전에 Bootstrap 예제 페이지를 통해 데이터를 넘기는 실습을 해보자. 이전에 했던 App.js에서 Nav 컴포넌트를 호출하는 부분에서 navName이라는 이름을 사용해 전달 하자. 원래는 함수 옆 ()안에 아무것도 없었지만, 지금은 props를 추가해준것을 볼 수 있다. 이후 아래쪽에서 {props.navName}이라고 넘겨준 props를 호출해주면..

이번에는 부트스트랩 웹페이지 실습 소스를 이용해 모듈화 하는 실습을 진행한다. 1. 예제 페이지 프로젝트 셋팅 https://startbootstrap.com/previews/new-age 해당 웹페이지에서 소스코드를 다운로드 한다. 압축을 풀면 파일은 이렇게 들어있다. css와 assets 폴더를 public 폴더 안에 그대로 넣어준다. index.html에 있는 내용은 프로젝트에 있는 index.html에 덮어주고, body 내용은 app.js에 넣어준다. 로 되어있는 주석을 찾아바꾸기로 {/* */}로 바꿔주고. 스타일의 경우도 {{style=}} 이렇게 바꿔준다. (참고로 max-width가 리액트 jsx에서는 maxWidth이다.) 실행해보면 부트스트랩 예제 페이지와 동일한 페이지가 생성된다. ..

컴포넌트는 화면을 구성하는 단위이다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있다. 1. 클래스형 컴포넌트 상태를 알수있는 값인 state를 사용할 수 있는 컴포넌트 render를 무조건 위치해야 한다. class 앞에 export default라는 의미는 외부에서 참조할 수 있게 선언한다는 의미이다. App.js에서 import를 해서 사용 해보자. App.js에 필요없는 부분을 지우고 ClassComponent를 참조하게 한다. 2. 함수형 컴포넌트 상태값이 없는 단순한 컴포넌트 함수형 컴포넌트 또한 동일하게 export default를 붙여 생성을 해준다. 함수형 컴포넌트는 render()가 필요 없다. 함수형 컴포넌트는 한개의 태그를 반환해야 하기 때문에 Fragment 태그를 추..

첫 번째로 개발에 필요한 node.js이다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이곳에서 크게 상관은 없지만 안전하게 LTS 버전을 받아서 설치한다. 설치 후 터미널에서 node -v를 하게되면 버전이 확인이 된다. 두 번째로 개발을 하기위한 IDE이다. VS Code와 WebStorm 두가지 중 WebStorm이 더욱 편리하고 UI/UX도 좋다고 생각한다. React 신규 프로젝트를 만들어 준다. Create를 누르면 알아서 이것저것 설치하고 프로젝트가 생성이 된다. [React] 1. SPA Framework란? node_module..