24. 05. 22 TIL

일찍 잤는데도 잠이,,, 온다,,, 정신 차릴 겸

동숲 브금을 들으면서(?) 간단하게 리액트 정리.

1.

css를 사용할 때는 className을 사용한다.

 

2.

자바스크립트 변수 등을 사용할 때는 중괄호를 사용한다.

 

3.

중요한 데이터를 저장할 때는 변수 대신 state를 사용한다.

첫 줄에 import {useState} from 'react' 작성,

원하는 곳에 useState('보관할 자료')를 작성하면 자료를 저장할 수 있다.

사용하기 위해서는 let [data, setData] = useState('') 이런 식으로 쓰면 된다.

let 뒤에 문법은 destructuring 문법으로, array 안의 데이터들을 변수로 쉽게 저장하기 싶을 때 사용한다.

변수 대신 state에 저장해 사용하는 이유는, state는 변동이 생기면 state를 사용하는 html을 자동으로 재렌더링해주기 때문이다.

 

4. 

state 변경을 위해서는 아까 만든  let [data, setData] = useState('') 에서 setData로 만드는데, setData('newData') 이런 식으로 만들면 된다. 소괄호 안에 넣은 걸로 state를 바꿔준다.

 

5. 

onClick은 함수를 넣어야 잘 동작한다. (함수명을 적거나 함수를 안에서 바로 만들어주기)

<div onClick = { ()=> { 실행 코드 } }>

function 함수명 () { }

 

6.

리액트에서 array, object state를 수정, 변경하고 싶을 때는 독립적인 복사본을 만들어 수정하는 것이 좋다.

그때는 스프레드 연산자를 사용한다.

 

7.

jsx 파일에서 html 코드를 짤 때 반드시 하나의 태그로 시작해, 하나의 태그로 끝이 나야 한다. 그래서 또 div 태그를 싸용해서 감싸줘야 하는데, 그냥 <> </> 이렇게 fragment 문법을 사용해 감싸줘도 된다.

 

8. 

긴 html을 한 단어로 줄여서 넣을 수 있는 문법을 컴포넌트라고 한다.

컴포넌트는 함수를 하나 만들어 return 안에 html을 담은 후 원하는 곳에 <함수명/>을 사용한다.

컴포넌트는 대문자로 만들고, function App(){} 내부에 만들지 않는다.

 

function Data() { return (~~) }

let Data = () => { return (~~) } 로 만들어도 된다.

 

9.

반복문 for 대신 map을 사용한다.

map은 array에 있는 자료 갯수만큼 코드를 반복 실행해준다.

또 콜백함수에 파라미터를 아무렇게나 넣으면 array 안의 모든 자료를 하나씩 출력해준다.

그리고 return 옆에 작성한 것을 array로 담아준다.

그런데 map 반복문으로 생성한 html엔 key={}를 넣어줘야 리액트가 각 div들을 구분할 수 있다.

 

10.

자식 컴포넌트가 부모 컴포넌트에 있던 state를 사용하고 싶다면 props로 전송해서 사용한다.

자식 컴포넌트를 사용하는 곳에서 <자식 컴포넌트 작명 = {state 이름}/>,

자식 컴포넌트를 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명으로 사용하면 된다.

 

11. 

input에 무언가 입력했을 때 코드를 실행하고 싶다면 onChange, onInput을 사용한다.

이것들은 유저가 입력할 때마다 코드를 실행해준다.

입력한 값을 가져오고 싶다면 event 파라미터를 추가해 event.target.value라고 적으면

input에 입력된 값을 가져올 수 있다.

 

12.

export default 변수명; 이런 식으로 작성하면 원하는 변수를 밖으로 내보낼 수 있다.

export한 변수를 다른 파일에서 사용하고 싶다면 import 작명 from './경로' 하면 된다.

파일마다 export default라는 키워드는 하나만 사용할 수 있다.

여러 개의 변수들을 내보내고 싶다면 export { ~, ~ } 이 문법을 사용하면 된다.

그리고 import로 import { ~, ~ } from './경로' 이렇게 받아오면 된다.

 

13.

styled-component를 사용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들수 있다.

div를 만들고 싶다면 let box = styled.div`` 이렇게 만들어 백틱 안에 스타일을 넣으면 된다.

 

14.

컴포넌트는 lifecycle 이라는 개념이 있다.

페이지에 장착되기도 하고 (mount), 업데이트도 되며 (update), 제거도 된다. (unmount)

근데 이 중간중간 특정 코드를 실행 할 수 있다. 

 

요즘은 상단에서 useEffect를 import 해와서

useEffect(() => { 컴포넌트 로드 & 업데이트 마다 실행되는 코드 }) 이런 식으로 작성하면 된다.

저 내부에 있는 코드는 html 렌더링 이후에 동작하는데,

원래는 반복문을 실행하고 html을 보여준다고 하면  useEffect 안에 적으면 html을 먼저 보여주고 반복문을 돌린다.

 

또한, useEffect의 두 번째 파라미터로 []를 넣을 수 있다.

여기엔 변수, state 등을 넣을 수 있는데, 대괄호 내부에 변수, state가 변할 때만 useEffect 안의 코드가 실행된다.

아무것도 넣지 않으면 컴포넌트 로드시 한 번만 실행하고 끝난다.

useEffect 동작 전에 특정 코드를 실행하고 싶다면 return () => {} 안에 넣으면 된다.

 

15.

props를 여러 번 전송해줘야 하는 귀찮은 상황일 때는 context API 문법이나, Redux 외부 라이브러리를 사용하면 된다.

 

context API는 일단 context를 하나 만들어줘야 한다. (state 보관함)

export let context 1 = React.createcontext();

 

이 context 1로 원하는 곳을 감싸서 공유를 원하는 state를 value 안에 적으면 된다.

<context1.provider value= { {공유, 원함} } >

  <Detail 감쌈 = {감쌈}/>

</context1.provider>

그럼 context1로 감싼 모든 컴포넌트와 그 자식 컴포넌트는 props 전송 없이 사용 가능하다.

 

이제 사용은 이 context를 import 해와서 useContext() 안에 넣는다.

import {context1} from './경로'

 

let {공유} = useContext(context1)

이것보다 redux를 많이 사용한다고 한다.

출처, 참고

코딩애플