[TIL] React 와의 첫 만남_221126

[항해99] REACT 강의

KEYWORD

Props Drilling

PropTypes

https://ko.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper

object literal

default argument

Hook

const 는 변경할 수 없는 상수 인데, 어떻게 setState를 이용해서 값을 변경할 수 있는지

component lifeCycle

component reRendering 조건

children으로 component 만들기

원시 데이터 타입

객체, 배열, 함수의 불변성을 지키면서 값을 수정할 수 있는 메서드

null과 undefined 정의와 두 키워드의 차이점

자바스크립트 파일 절대경로, 상대경로 설정하는 방법

자바스크립트 export, export default, import 각각은 무슨차이가 있을까?

State란 컴포넌트 내부에서 바뀔 수 있는 값

State를 만들 때는 useState()를 사용

useState Hook 사용 방식

const [ value, setValue ] = useState( 초기값 )

 

먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고, 배열의 첫번째 자리에는 이 state의 이름,  두번째 자리에는 set 을 붙이고 state의 이름을 붙입니다. 그리고 useState( ) 의 인자에는 이 state의 원하는 처음값을 넣어줍니다.

 

state를 변경할때는 setValue(바꾸고 싶은 값) 를 사용

 

1.

function GrandFather() {

  const [name, setName] = useState("김할아"); // state를 생성

  return <Mother grandFatherName={name} setName={setName} />;

}

 

GrandFather에는 name이라는 state가 있고 초기값은 김할아

GrandFather Component는 Mother Component를 호출하고 있고

props로 grandFatherName setName을 넘겨주고 있음

 

2.

function Mother(props) {

  return (

    <Child grandFatherName={props.grandFatherName} setName={props.setName} />

  );

}

Mother Component에서는 다시 Child로 넘겨주고

 

3.

function Child(props) {

  return (

    <div>

      <button

        onClick={() => {

          props.setName("박할아");

        }}

      >

        할아버지 이름 바꾸기

      </button>

      <div>{props.grandFatherName}</div>

    </div>

  );

}

Child에는 버튼이 하나 있고 클릭하면 props이름을 ‘박할아’로 변경하고 있음

 

setState를 통해서 바뀐 값이 서버나 어딘가에 저장되는 게 아니므로 단순히 화면에서만 바뀐 값으로 랜더링

So 새로고침하면 다시 초기값인 ‘김할아’로 돌아감

Input 에 값 입력

사용자가 입력한 input값을 추출하기 위해서 event.taget.value에 접근한다는 뜻

추출해온 값을 setValue value의 State에 연결해주면 Input과 State가 연결된다

onChange에 함수 onChangeHandler를 연결해주고 value를 연결해줌

즉 사용자가 input의 어떤 값을 입력하면 입력할 때마다 onChange될 때마다

value라는 State의 setValue를 해서 값을 넣어주는 것임

불변성

원시데이터는 수정을 했을 때 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장함

원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 바꿔버립니다.

 

---

👊🏻 오늘 한 일

• 10시 ~ [프로그래머스] 최소직사각형 
• 11시 [혼공자] 언어스터디 7-1 문서 객체 조작하기
• 11:30 ~ [항해99] React 강의 1-6 ~ 1-16(완강)
• 15:00 기술매니저님 - yarn과 npm 차이 찾아보세요
• 15:30 ~ 17:30 하체 웨이트, 스트레칭
• 19시 ~ [노마드코더] React 강의 2-2, 7-0

😲 오늘 느낀 점

새벽 2~3시에는 자야 다음날 기상에 지장이 없는 것 같다. 어제 4시 반 넘어서 노트북을 끄고 5시쯤 잠들었는데 아침에 알람을 듣고 깼지만 다시 잠들어서 10시에 일어났다. 할 일이 많아서 마음이 급하지만 급할수록 돌아가라는 말이 있듯 규칙적인 생활 습관을 지켜나가는 게 중요하다고 느꼈다. 운동으로 체력이 많이 좋아져서 지금 버틸 수 있다고 생각한다. 내일은 오전에 일찍 일어나서 공부하다가 11시 반쯤 운동을 하고 닭가슴살 소시지를 사와야겠다. 헬스장에서 운동을 하는데 묘하게 살이 붙은 느낌이었다. 요즘 밤늦게 과자를 먹어서 아마 살이 찐 것 같다. 굳이 몸무게는 안 재지만 간식을 줄여야겠다.

알고리즘 문제 하나씩 푸는 '습관'을 들여야겠다. 1시간 정도 고민해도 안풀리면 과감하게 해설을 보고 대신 문제 접근 방법을 기억해야겠다. 언어스터디에서는 DOM 이벤트와 문서 객체를 생성/이동/제거하는 것에 대한 발표를 들었다. 꼼꼼하게 준비한 자료로 설명을 쉽게 해주셔서 이해가 잘 됐다. 항해에서 제공되는 리액트 강의를 들으니 pros, state는 어느정도 이해가 가는데 component 관련 강의는 이해가 안 됐다. 강의를 들으며 메모한 내용만 옮겼는데 나머지 개념들은 내일 개인프로젝트를 한 번 만들어보고 이해가 된 상태로 정리해야겠다!

 

👏🏻 오늘의 칭찬

오랜만에 운동했음!!

🤔 오늘 아쉬운 점

저녁에 잠들었었음.

⛵️ 내일 할 일

• [프로그래머스] 31. 같은 숫자는 싫어
• [노마드코더] React 강의 7-1 💫
• React 개인 과제 - to do list 🌟
• React 팀 과제 질문 6개 정리 ⭐️
• 등 웨이트 & 스트레칭
• yarn vs npm
• sudo -i root 권한, chown -R root.root./디렉토리 소유권 변경 명령어. chmod 755./파일명 파일 rwx 권한 변경 Search
• 드림코딩 youtube - Git
• 단축키 설정
• [to buy] multi hub, 더단백 커피
• WIL 쓰기 - JavaScript의 ES란?, ES5/ES6 문법 차이

+ More

algorithm, javascript. react Repo 다시 만들기, [혼공자], [모자딥], flask 등 install

 

https://teamsparta.notion.site/5782126c1eda4716ae6e057ab6579751

외부 강의 추천 목록

< 팀 과제 질문 >

🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?

 

🔐 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?

 

🔐 양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

 

🔐 event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요?

 

🔐 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다. domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?

 

🔐 SPA 방식과 MPA 방식은 무엇인가요?

 

+ 자바스크립트 입문 강의

https://school.programmers.co.kr/learn/courses/3

Hello, JavaScript: 자바스크립트 입문