React (9) 썸네일형 리스트형 [ React ] [Chapter 15] prop-types 속성값 타입 정의하기 prop-types 속성값 타입 정의 prop-types 패키지는 속성값의 타입 정보를 정의할 때 사용하는 리액트 공식 패키지이다.일단 prop-types 패키지를 배우기 이전에type을 왜 지정 하는지에 대해 알아보겠습니다.일단 자바스크립트는 동적 타입 언어이다. 타입에 대한 고민을 안 하고, 코드를 작성할 수 있고, 바로 작성한 코드로 어플리케이션을 실행 시킬 수 있죠 그래서 배우기 쉽고 간단한 어플리케이션을 작성할 때는 생산성이 좋기도 합니다. 그런데 큰 규모의 어플리케이션을 작성할 때는 오히려 생산성이 떨어집니다. 그래서 리액트의 정적 타입 언어를 배워두는것이 좋습니다. 간단한 어플리케이션만 작성할건 아니니깐요 사용 예 function Home({ name, age, memberState, onN.. [ React ] [Chapter 11] 커스텀 Hook 제작 커스텀 Hook 리액트가 제공하는 훅을 이용해서 커스텀 훅을 제작할 수 있다.그리고 커스텀 훅을 이용해서 또 다른 커스텀 훅을 제작할 수도 있다.훅을 직접 만들면 쉽게 로직을 재사용할 수 있다.어떠한 언어이든 (특히 java) 코드중복은 죄약이다 라는 말이 있습니다.그러하든 이 재사용성이 큰 장점이 됩니다.리액트 내장 훅 처럼 커스텀 훅도 use로 시작하는게 좋습니다 관리에 유용합니다.전 챕터인 10의 코드를 재사용 할 겁니다. 그 코드에서 필요한 즉 커스텀 할 훅은 const [ member, setMember ] = useState(null); useEffect(() => { serverApi(memberIdx).then(it => setMember(it)); return () => { console.. [ React ] [Chapter 10] Hook의 기초 알기 Hook 챕터 8 useState 편에서 훅에 대해 잠깐 설명 했습니다.이 챕터에서는 훅의 기초를 알아가는 시간을 가지겠습니다.Hook(훅) 컴포넌트에 기능을 추가할 때 사용 하는 함수이다. 예를 들어 컴포넌트에 상태값 추가나 자식 요소에 접근 하거나 할 때 사용하죠리액트 16.8버전 이후 부터 기능이 추가가 되었습니다. 그 전에는 클래스형 컴포넌트를 사용 했습니다. 그러나 이제 훅이 나오면서 많은 개발자들이 함수형 컴포넌트로 바꾸기 시작했습니다. 클래스형 컴포넌트보다 장점이 많고, 리액트 팀에서도 훅에 많은 집중을 하고 있습니다. 그래서 리액트 훅으로 작성 하는것을 추천한다.리액트에서 제공하는 대표적인 두 가지 기능이 있다. 1.useState 상태값 추가 2.useEffect 부수적인 기능들 처리 할.. [ React ] [Chapter 8] useState useState useState는 컴포넌트에서 보여줘야 하는 데이터가 사용자 인터랙션에 따라 바뀌어야 할 때 많이 사용 된다. useState 알기 전에 알아야할 Hooks Hooks 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 상태를 관리하거나 상태를 관리 했었다. 16.8버전 이후로는 Hooks 라는 기능이 도입 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. Hook는 class를 작성하지 않고도 state와 다른 리액트의 기능들을 사용할 수 있게 해준다. Hook는 생명주기와 이벤트 핸들러와 state를 연동 시켜주는 도구이다. 이 Hooks 에서 제공하는 useState라는 함수를 사용 할거다. 코드 작성 예시 많은 예시이고 좋은 예시인 카운터를 하는 예시로 설명을 하겠습니다.. [ React ] [Chapter 6] LifeCycle API 란? LifeCycle API 란 무엇인가 리액트에서 컴포넌트를 만들 때 가장가장 중요한 이 LifeCycle API를 배워볼거다 LifeCycle API 는? 단어만 보면 생명주기 라는걸 알 수 있다. 컴포넌트가 우리 브라우져에서 나타날 때, 업데이트 될 때, 사라질 때 이러한 중간 과정에서 우리가 어떤어떤 작업을 하고 싶다 그럴 때 사용하는 것이 LifeCycle API이다 LifeCycle API는 종류가 엄청 많다 보면 엄청 많죠? 저 하나하나가 다 함수입니다. 꼭 다 외울려 하지말고 아 이런게 있구 하고 넘어가고 나중에 필요할 때 찾아보면 됩니다. 당연 다 외우면 좋기야 하죠 일단 설명을 하자면 Mounting 은 컴포넌트가 우리 브라우져상에 나타난다는 것 ->1. constructor : 생성자 함.. [ React ] [Chapter 5] State State 이번엔 State를 알아보겠습니다 이것도 리액트의 아주 중요합니다.State는 컴포넌트 자기 자신이 들고 있는데, 만약에 변화가 필요하다 그러면 컴포넌트 내장 함수인 setState() 함수를 이용해 설정해 줍니다. props 같은 경우는 부모가 자식한테 값은 전달해주는 즉 자식은 데이터 읽기만 가능했다면 State는 조금 다른 개념인 자기가 가지고 있고 읽기도 하고 쓰기도 하는것 즉 props 는 Reader 와 Writer이 나뉘어져 있다면 State는 하나로 뭉쳐진것이죠 State 사용해보기 새로운 컴포넌트를 만들자 글자는 ItJava.js로 만들었다.어떠한 이벤트로 카운터를 늘리고 줄이는 걸 만들어 보자 이전에 설명 했듯이 state는 자기 자신이 변화를 가지고 있고 해당 데이터를 읽고.. [ React ] [Chapter 4] Props Props 리액트에서 정말 중요한 개념이다 꼭 짚고 넘어가자 리액트에서 데이터를 다룰 때 사용되는 개념이다. Props는 부모 컨포넌트가 자식 컨포넌트한테 값을 전달 할 때 사용될 때 사용 된다. 즉 부모가 자식한테 넘겨주는 값 단위를 props라고 한다 Props 사용하기 이전 챕터에서 말 했듯이 프로젝트를 설정 했다면 그것을 아님 글자 처럼 codesandbox 사용한다면 codesandbox를 codesandbox 사용 하고 싶으면 전 챕터를 참고해주세요 해당 처럼 하나의 Js를 생성하자 import React, { Component } from 'react'; class MyItJava extends Component { render() { return( Itjava입니다 블로그 주소는뭐뭐 입니다.. [ React ] [Chapter 2] Webpack와 Babel 설명 및 설치환경(Window,macOs,Linux) Webpack와 Babel Webpack와 Babel 을 알기 전에 하나 알고 넘어가자 React 프로젝트를 생성할려면 환경구축이 오래걸리고 할것들이 엄청 많다. 배울거지만 Webpack와 Babel, HMR, jest, eslint, polyfill, CSS 등등 엄청 많다. 이 많은것들을 다 손수 환경 구축 해줘야 한다. 그래서 개발환경을 직접 구축하려면 많은 지삭과 노력이 필요하다. 이 강의 리뷰는 create-react-app 으로 강의를 시작 할 거기 때문에 해당 개발 환경 직접 구축은 따로 글을 올리겠다. 일단 여기서는 개념만 알아두자 Webpack는 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개로 결과파일을 만든다 즉 전체적으로 파일들을 관리해주는 도구라고 생각하면 된다. 어떠한 코.. 이전 1 2 다음
