[TIL] # 001 (리액트)

Today I Learned

블로그로 리액트 공부

• 누구든지 하는 리액트 3편: JSX
  링크 : https://velopert.com/3626
• 누구든지 하는 리액트 4편: props 와 state
  링크 : https://velopert.com/3629
• 누구든지 하는 리액트 6편: input 상태 관리하기
  링크 : https://velopert.com/3634

리액트 공식문서 독해

2. Introducing JSX
3. Rendering Elements

유튜브로 리액트 공부

• 생활코딩 React - 1 ~ 7강

개념 요약

1. 리액트 JSX

• 리액트에서 컴포넌트는 함수형과 컴포넌트 형으로 작성 할 수 있다.
• 두 개 이상의 엘리먼트는 하나의 엘리먼트로 감싸야 한다. 또는 Fragment로 감싼다.
• var는 스코프가 함수 단위이고, const와 let은 스코프가 블록 단위이다.
• JSX에서 조건문을 쓸 때는 if문을 사용할 수 없다. 삼항연산자나 And 연산자를 사용 한다.
• And 연산자는 true일때만 보여주고 false일때 아무것도 보여주지 않는다.
• 리액트 컴포넌트에서는 'class' 대신에 'className'을 사용한다.
• 주석 작성법 : {/* ... */}
• 태그 사이 주석 작성법 : //

2. props & state

• Props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 Props를 수정 할 수 없다.
• State는 컴포넌트 내부에서 선언하며, 내부에서 값을 변경 가능 하다.
• State를 정의할 때 class fields 문법을 사용해서 정의한다.
• 부모 컴포넌트에서 prop를 만들 때

<MyName name = "리액트" />

• 함수형 컴포넌트에서 Props를 받을 때

const MyName = ({name}) => { 
  return (
 	<div> 안녕하세요! 제 이름은 {name} 입니다. </div> )}

• defaultProps
• State에서는 화살표 함수를 쓴다.
• SetState는 객체의 깊숙한 곳까지 확인하지 못한다.
• HTML에서는 onclick 속성에 클릭되면 실행할 자바스크립트를 문자열 형태로 넣어준다.
• 리액트의 이벤트(ex: onclick)를 쓸 때 카멜 케이스로 써줘야 한다. (ex: onClick)
• 리액트에서 이벤트에 전달해 주는 값은 함수 형태여야 한다.
• 리액트에서 이벤트로 함수를 전달해 줄때 함수를 호출 해서는 안된다.

3. 공식문서 영어 독해 단어

1. currly braces : 중괄호
2. parentheses : 괄호
3. if statements : if 구문
4. for loops : for 반복문
5. quotes : 따옴표
6. definition : 설정
7. compilation : 명령어를 번역하다.
8. keep it up date: 최신상태로 유지하다.

4. TIP

• 터미널 창에 폴더를 드래그 하면 자동으로 그 폴더의 경로가 입력 된다.

Tomorrow’s Things to Do

• 누구든지 하는 리액트 7편: 배열 다루기 (1) 생성과 렌더링
  링크 : https://velopert.com/3636
• 누구든지 하는 리액트 8편: 배열 다루기 (2) 제거와 수정
  링크 : https://velopert.com/3638
• 리액트 공식 문서 읽기
  4. Components and Props
• 생활코딩 리액트 강의 듣기

Monthly goal

1. 리액트 props & state 마스터
2. 아고라스테이츠에 리액트 질문하기
3. DOM으로 HTML 조작하기
4. sort 함수 배우기
5. 배열, 객체, 고차함수 공부 (삼차원 배열 문제 풀기)
6. 코플릿 어려운 문제 위주로 풀이