post-thumbnail

8. 함수형 컴포넌트

함수형 컴포넌트 사용법 컴포넌트 생성시 마다 클래스와 그 안에 render 매서드 작성 번거로움 오직 props 전달받아 랜더링 하는 경우 함수형 컴포넌트로 간단하게 작성 순수 함수 이용한 컴포넌트 선언 화살표 함수와 비구조화 할당 문법 사용한 컴포넌트 선언 언제 함수형 컴포넌트를 사용할까 state, 라이프 사이클 등의 불필요한 기능 제거된 함수형 ...

2021년 11월 17일
·
0개의 댓글
post-thumbnail

7. 컴포넌트 LifeCycle

라이프사이클 라이프사이클 접두사 will : 어떤 작업 작동 전 실행되는 메서드 Did : 어떤 작업 작동 후 실행되는 메서드 Mount DOM 생성되고 웹 브라우징에 나타남 Mount 할때 라이프사이클 컴포넌트 생성 constructor 컴포넌트 새롭게 만들 때마다 호출되는 클래스 생성자 getDerivedStateFromProps props에 있는 ...

2021년 11월 17일
·
0개의 댓글
post-thumbnail

6. 컴포넌트 반복

JS 배열의 map() 함수 반복되는 컴포넌트 랜더링 가능 map() : 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 프로세싱 한 후 그 결과로 기존 배열을 새로운 배열로 생성 문법 callback : 새로운 배열 요소 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 arr...

2021년 11월 16일
·
0개의 댓글
post-thumbnail

리덕스 개념 이해

소개 App에서 모든 상태의 로직 관리 컴포넌트 state 업데이트하면 App 컴포넌트 re-rendering됨 상위 컴포넌트 re-rendering하면 하위 컴포넌트도 re-rendering됨 여러개의 컴포넌트 거쳐 props 전달해야함 리덕스 : 상태 관리의 로

2021년 11월 15일
·
0개의 댓글
post-thumbnail

5. ref:DOM에 이름 달기

DOM 요소의 id public/index.html : id가 root인 div 요소 src/index.js : id가 root인 요소에 리액트 컴포넌트 랜더링 >리액트 컴포넌트 안에서 id 사용 가능 -> 권장 X 원칙적 : unique한 DOM의 id 문제 상황 발생 : 중복 id 가진 DOM 생성됨 ref 의 경우 : 전역적 작동 X, 컴포넌트 내...

2021년 11월 15일
·
0개의 댓글
post-thumbnail

4. Event Handling

event : 웹 브라우저에서 DOM 요소와 상호작용 리액트 Event 시스템 주의 사항 camelCase로 이벤트 이름 작성 이벤트 실행 시 js 코드가 아닌 함수 형태의 값/객체 전달 DOM 요소에만 이벤트 설정 가능 div, button, input,form, s

2021년 11월 13일
·
0개의 댓글
post-thumbnail

3. Component

사용자가 보는 어플리케이션 인터페이스는 여러 컴포넌트로 구성됨각 기능에 따라 컴포넌트 생성 -> 따로 파일 생성해 저장/작업첫 컴포넌트 생성MyComponent.js 파일 생성 후 초기 코드 작성export default MyComponent : 다른 파일에서 해당 파

2021년 11월 12일
·
0개의 댓글
post-thumbnail

2. JSX

2. JSX

2021년 11월 9일
·
0개의 댓글