20220919 GitHub 블로그 시작, React 공부
드디어 GitHub 블로그를 만들었다.
velog, Tistory, GitHub 블로그 중에 고민하다가 너무 예쁜 GitHub 블로그를 봐버려서 GitHub 블로그로 결정해버렸다.
맘에 든 테마를 fork하고 기본적인것들과 우선적으로 이름, 프로필, favicon을 커스텀해봤는데 지금은 시간이 없으니 이후에 더 맘에 드는걸로 수정해야지.
[React] 리액트를 다루는 기술
오늘 저녁 스터디가 컴포넌트 끝까지 공부하는건데 지금 시작하고 있기 때문에 처음부터 차근차근 보고 싶었던 마음은 우선 접어두고 3장부터 얼른 시작하자.
2장 JSX
강의 들으러 도서관 왔는데 아이패드 배터리 없어서 리액트 2장 공부 추가
Definition
- bundler : import로 모듈을 불러
3장 컴포넌트 84pg-117pg
클래스형 컴포넌트 vs 함수 컴포넌트(85pg)
화살표 함수 vs 기존 함수(89pg)
모듈 export, import(91pg)
props
-
props.names, props.children
❓props.name도 html에서의 태그 이름처럼 고정된 문법일까? props.children은 그런것 같아서 -
defaultProps
-
비구조화 할당 문법(96pg)
❓함수의 파라미터 부분에서도 사용할 수 있다. 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것이다. -
propTypes, 종류
-
isRequired(99pg)
React 홈페이지
컴포넌트는 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환. 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트. -> 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭
React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체=props 로 전달합니다. 이 객체를 “props”
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. 순수함수 : a,b받아서 a+b값 return만 함.
State를 올바르게 사용하기
- 직접 State를 수정하지 마세요. this.state를 지정할 수 있는 유일한 공간은 바로 constructor입니다. setState()를 사용.
- State 업데이트는 비동기적일 수도 있습니다. React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있습니다. this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안 됩니다. 이를 수정하기 위해 객체보다는 함수를 인자로 사용하는 다른 형태의 setState()를 사용
- State 업데이트는 병합됩니다 setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합합니다.
state를 소유하고 설정한 컴포넌트 이외에는 어떠한 컴포넌트도 그 state에 접근할 수 없습니다. 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할지 선택할수있다.
트리구조가 props들의 폭포라고 상상하면 각 컴포넌트의 state는 임의의 점에서 만나지만 동시에 아래로 흐르는 부가적인 수원(water source)이라고 할 수 있습니다.
React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다.
스터디
Hook
클래스 처음 만들때 함수의 느낌으로 만든건데 hook을 추가한게 함수형
this의 개념
함수는 렌더링 하기 전까지 this의 값을 바꾸지 않는데, 클래스는 렌더링하기 전에도 this의 값을 바꿀 수가 있다.
함수에서도 이런 역할을 하는게 있다 = ref?
state vs props
❓둘 중 무엇을 쓰는게 더 권장이 될까?
근데 함수형을 쓰는게 리액트 팀에서도 권장 사항
다음 스터디: 내 차례 4장 끝까지
Leave a comment