React 스터디

"리액트를 다루는 기술" 도서를 참고하여 React를 스터디를 시작하려고 한다. 업무에 필요한것들을 직접 개발하고 사용해 보자!!Node.js / npm, yarn 설치create-react-app으로 프로젝트 생성

애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있음데이터가 주어졌을 때 이에 맞추어 UI를 만들어 줌라이프사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수

컴포넌트를 생성해 보자!새로운 파일 생성 한다. 귀여운 강아지가 생각나서 Puppy 컴포넌트를 생성해 보았다src/Puppy.jsApp.js도 수정하여 새로만든 Puppy 컴포넌트를 넣어보자클래스형 컴포넌트클래스형 컴포넌트에서 컴포넌트를 추가하기 위해서는 Compone

props는 properties의 약자로 컴포넌트 속성을 설정할 때 사용props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능예시로 부모 컴포넌트(App.js)에서 name 이라는 porps를 만들어 자식 컴포넌트(Puppy.js)에 전달해 보겠습

함수형 컴포넌트에서 props 값을 조회할 때마다 props.name, props.age 처럼 props. 키워드를 붙여 사용하고 있다. ES6가 제공하는 비구조화 할당 문법을 사용하면 내부 값을 바로 추출 할 수 있다

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용propTypes를 지정하는 방법은 defaultProp를 설정하는 것과 유사함(SQL문법의 Not Null과 형 지정과 유사하다)

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값. 자식 컴포넌트는 해당 props를 읽기 전용으로만 사용할 수 있으며, porps를 바꾸려면 부모 컴포넌트에서 바꿔 줘야 함state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미

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

하나의 useState 함수는 하나의 상태 값만 관리할 수 있음컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하자!좀더 연습해 볼까요??갑자기 사과가 땡겨서 아래와 같이 사과를 그냥 둘지, 먹을지 결정하는 컴포넌트를 만들어 볼께요먼저 App