🔆 리액트 개발 정리🔆

React 개발 정리

React를 개발하면서 고민했던 것들을 정리해나가는 게시글

---

화면 전체 영역 CSS 적용

초기에 아래와 같이 div의 클래스 App에서 CSS를 적용했을 때, 전체 화면에 적용되지 않고 margin이 body에 들어가져 있는 문제 발생

width: 100vw; height: 100vh; background: red

App.jsx 코드

import './App.css';

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

해결방법

해결방법은 간단했다. body에 margin: 0을 주면 된다.
App.css 폴더

body {
	margin: 0;
}

---

useEffect

특정 시점에 함수나 조건이 실행되도록 하고 싶은데, useEffect를 어떤 조건으로 줘야 내가 원하는 시점에 실행되도록 하는지 헷갈림.

useEffect ( () => {

})

해결방법

useEffect의 사용 시점
1) return 문의 태그가 모두 실행 완료 될 때마다 실행된다.

useEffect ( () => {

})

...
return (
	<div>안녕</div>
)

2) 처음 렌더링 될 때 바로 실행된다.

useEffect ( () => {

}, [])

3) 특정 시점에 렌더링 하고 싶을 때, 실행된다.

(1) props.data1이 변경될 때마다
useEffect( ()=> {
	
}, [props.data1]);
(2) props.data1 또는 props.data2가 변경될 때마다
useEffect ( () => {

}, [props.data1, props.data2]);

---

삼항 연산자

한 줄 안에 조건을 간단하게 작성해서, 효율성 높은 코드를 작성하고 싶을 때

// 만약 data가 true 일 때, data1을 data가 false 일 때, data2를 출력함. 
data ? data1 : data2

삼항 연산자를 활용해서 style을 주고 싶을 때

<div style={{backgroundColor: data==1 ? '#ffffff' : '#000000'}}></div>