리액트 - 공식문서로 디테일 잡기 (초급)
목차
1️⃣ 공식문서를 보는 이유
2️⃣ 개발 환경 설정
3️⃣ JSX
4️⃣ Props
5️⃣ State
6️⃣ 컴포넌트 생명주기
7️⃣ 이벤트
8️⃣ 조건부 렌더링
9️⃣ List
🔟 Form
🧑🏻💻 오늘의 회고
1️⃣ 공식 문서를 보는 이유
라이브러리도 결국 사람이 만든 것임
그 사람들이 만든 목적과 사용법을 정리해둔 것이기 때문에 제일 중요함.
심지어 책에서도 대부분이 공식문서의 내용을 다룸.➡️
리액트는 친절하고, 한국어 번역도 대부분 있으며, Tutorial 까지 있기 때문에 Goood! 👍
공식 문서를 보는 방법
목적에 따라 나뉨.
➡️
바로 써보기 vs 이해 해보기
우리는 지금 맛보기를 했으니, 토픽별로 훑어보며 이해해보자!
➡️
반복 & 숙달 만이 전부다!
2️⃣ 개발 환경 설정
VS CODE 다운로드 후 진행!
Create React App
공식 문서 참고! (짱 잘나와있음 짱 친절 👍)
1️⃣ 일단 Node.js를 먼저 설치 해야함
Node.js 란?
로컬에서 리액트 앱이 돌아갈 수 있도록 해주는 환경
(TMI : npm과 npx도 자동으로 설치됨)
2️⃣ 그 후 터미널에서 npx create-react-app my-app 실행
3️⃣ cd my-app 후 npm start로 실행!
3️⃣ JSX
JSX 란? (공식 문서)
➡️
React.createElement의 간편 표현식이다.
4️⃣ Props
Props 란? (공식 문서)
➡️ 컴포넌트에 전달되는 단일 객체
🚨 Props 사용시 주의사항
Props 자체를 수정해서는 안됨
➡️
순수함수처럼 동작해야 함
컴포넌트 합성 및 추출
아래와 같은 방식으로 컴포넌트들을 추출해서, 컴포넌트들을 단순한 구조로 재배치 할 수 있음.
(컴포넌트들의 재사용)
5️⃣ State
State란? (공식 문서)
➡️ 컴포넌트 내의 상태를 나타냄. (자신의 출력값을 변경함)
functional component도 class component랑 똑같은 기능을 할 수 있다.
(상태 관리, 변경 등등)
6️⃣ 컴포넌트 생명주기
컴포넌트 생명주기란? (공식 문서)
➡️ 컴포넌트의 생성, 업데이트, 제거 과정을 뜻함.
생명주기 도표 참고!
생명주기 상태 목록
1️⃣ constructor
➡️ state 초기화 및 메서드 바인딩
2️⃣ componentDidMount
➡️ Dom 노드 초기화 및 데이터 fetch
3️⃣ componentWillUnmount
➡️ 타이머 제거 및 요청 취소 및 구독 해제
4️⃣ Functional Component
➡️ hook으로 대부분 구현 가능
7️⃣ 이벤트
이벤트란? (공식 문서: SyntheticEvent) (지원하는 이벤트 목록)
➡️ 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것.
합성 이벤트 (SyntheticEvent)
JS와 인터페이스는 같지만, 직접 대응되지 않고 조금씩 다름
➡️
SyntheticEvent라는 repo안에NativeEvent가 들어있음 참고
이벤트 처리하기 (eventHandling) (공식 문서)
- React의 이벤트는 camelCase를 사용함.
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달함.
- 리액트에서는 addEventListner를 호출할 필요가 없음!
Bubble / Capture
Capture > target > Bubble
클릭시 자식보다 부모가 먼저 클릭을 인지하게끔 만들고 싶으면 ,
➡️
onClickCapture()사용
동작하지 않게 만들고 싶을때
JS에서는 return false 를 이용하지만, React에서는
➡️
e.preventDefault()해주면 됨!
8️⃣ 조건부 렌더링
조건에 따라 다르게 렌더링하기 (Conditional Rendering)
If문
이런식으로 표현
if (condition) {return A} else {return B}
📌 논리 && 연산자로 If를 인라인식으로 표현하기
이렇게 표현하면, && 앞의 식이
true일때 뒤의element출력
Falsy 주의!
만약 앞의 조건문이number일때, 값이 0이면false로 뒤의element가 출력이 안됨.
삼항연산자
condition ? A : B
아예 안그리고 싶은 경우
return null
9️⃣ List
map
배열의 개별 요소를 순회함.
(key는 여기서 선언해야함!)
default key
key를 선언하지 않으면 react는 index를 default key로 사용함. (❗️ 워닝 뜸!)
고유성
key는 형제 사이에서만 고유하면 됨.
즉, 아래와 같이 구성되어 있으면,
<p>와<span>태그 말고<div>에만 키값이 있으면 됨.<div> <p></p> <span></span> </div>
key props
key는 props로 넘어가지 않음. (외부 요소에서 key값 접근 불가)
🔟 Form
Controlled Component
사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트하며, 주로 setState활용
(input의 value를 state로 관리)
Uncontrolled Component
DOM 자체에서 폼 데이터가 다루어지는 컴포넌트이며, 주로 useRef 활용
(form element 자체의 내부 상태 활용)
다중 입력
여러 input 엘리먼트를 제어해야할 때, 각 엘리먼트에 name 어트리뷰트를 추가하고 event.target.name 값을 통해 핸들러가 어떤 작업을 할지 선택 가능하게 해줄 수 있음.
예시) 선택한
form의value에 따라서 다른 set함수를 호출함!function handleChange(event){ const name = event.target.name; if (name === 'name') { setName(event.target.value) } if (name === 'essay') { setEssay(event.target.value) } if (name === 'flavor') { setFlavor(event.target.value) }
defaultValue, ref
기본값 / value 확인
🧑🏻💻 오늘의 회고
강사님이 해주신 말씀중에,
기초는 이후 성장속도의 차이를 가르는 키포인트라는 말씀이 굉장히 와닿았다.
공든 탑이 무너지지 않는 법... 항상 공식문서를 습관처럼 보고,
stackoverflow에서 영문으로 검색하는 것을 두려워하지 말자!
