TIL - 22.10.26

props

- properties의 약자, 우리가 어떤값을 컴포넌트에 전달할 때 사용

- 상위 컴포넌트 -> 하위 컴포넌트 (단방향 흐름)

 

 

children prop

- 모든 컴포넌트의 props 객체는 children이라는 이름의 property를 가진다

- props.children은 컴포넌트의 여는 태그와 닫는 태그 사이의 모든 것을 리턴

ex)<Welcom>Hello World!</Welcom>

 

function Welcome(props) {

  return <p>props.children</p>  --> props.children == Hello World!

}

 

 

JSON 메소드

JSON.stringify()

 : js객체 -> JSON 문자열로 반환 (object to JSON)

 

JSON.parse()

 :JSON 문자열 -> js객체로 반환 (JSON to object)

 

fetch json() 메소드

 : fetch의 응답(res)객체는 json()메소드 제공

   res.json() : JSON데이터를 js객체로 반환 <js( react )에서 사용하기 위해서

 

 

동기/ 비동기 함수

동기(synchronized)함수 : 작성된 순서대로 실행 . 즉, 코드를 실행시키고 그 결과 값을 받을때까지 기다린 후 다음 코드 실행

비동기(asynchronized)함수: 코드를 실행시키고, 그  결과값이 언제 받을지 모르는 상태에서 다음 코드 실행

 

비동기 실행 존재 이유 : 동기실행에 비해 동일한 작업을 더 빠르게 처리 가능

 

fetch 함수 (비동기실행 함수)

:fetch 함수  -> promise 객체(작업에 관한 '상태정보'를 가진 객체) 리턴

상태정보 : pending(진행중) / fulfilled(성공) / rejected(실패) 

.then : promise 객체의 메소드 (콜백 함수를 등록하기 위해 사용)

  

 

리액트에서 이미지 넣는 방법

src폴더 안에 있는 이미지 넣기

 : import 변수 from './이미지경로' 로 임포트 해온 다음

  <img src={변수} /> 로 이미지 넣기

 

src폴더 안 이미지를 css파일 이용해 넣기

 : background-image: Url('이미지경로)

 

public/assets 폴더 안 이미지 넣기

 : <img src='./assets/이미지명.확장자' />

 

 

UseEffect()

1. 처음 한번만 실행

useEffetc(() => {

//실행할 코드(콜백함수)

}, []);

 : 컴포넌트가 처음 렌더링되고 나면, 리액트가 콜백함수 기억해뒀다가 실행, 그 이후로 콜백함수 실행X

 

2. 값(디펜던시 리스트)이 바뀔때마다 실행

useEffetc(() => {

//실행할 코드(콜백함수)

}, [값(디펜던시 리스트)]);

 : 컴포넌트가 처음 렌더링되고 나면, 리액트가 콜백함수 기억해뒀다가 실행

   그 이후로 렌더링 할때 디펜던시 리스트 값을 확인해서 변경되면 콜백함수 실행