일만시간을 같이 만들어보자 🏃♀️🏃♂️🏃
HTML
목표 : 처음부터 어떻게 구현되는지 순서를 보자
먼저 '1만 시간의 법칙은~' 텍스트 부분까지 header
사용자 입력부분, 버튼, 결과 화면까지 main
그 외는 footer로 각 레이아웃을 나누어 구성한다
<header>
<main>
<footer>
<section id="modal">
👉 사용자의 value값을 받는 input을 감싸는 부모는 div나 다른 태그들보다 form 태그를 써서 submit을 사용하는 것이 더 시멘틱적이다
그것을 아래의 폴더만들기 명령어로 react 폴더를 만들어
미리 레이아웃을 구성한 각각의 html, css, img를 해당 폴더 안으로 가져온다
npx create-react-app 프로젝트명 --template basic-reactReact
목표 : 위에서 각 구성된 HTML을 가져와 component화 해보자
-
class- > className 으로 변경
-
이미지를 웹팩 문법으로 가져와 { }안에 import 변수를 넣는다
-
css를 react의 각 컴포넌트의 css에 적용해주고 (reset.css는 index.css에 공통css로 적용)
-
또한 css의 background-image는 url('../../images/title_bg.png'); 이런식으로
../경로가 달라져서 경로를 수정해야한다 수정을 하지 않을 시 못 찾게 된다 -
각 jsx 파일에 import './해당파일.css';를 하여 import 해준다
-
App.js로 각 컴포넌트 들을 import 한다
import Header from './components/header/Header';
function App() {
return (
<div id='app'>
<Header />
</div>
);
}
export default App;
Modal
목표 : Main 컴포넌트에서 버튼을 클릭했을 때의 아래 모달 화면을 구현해보자
function App() {
const [modal, setModal] = useState(false);
function modalOpen() {
setModal(true);
}
function modalClose() {
setModal(false);
}
return (
<div id='app'>
<Header />
<Main modalOpen={modalOpen} />
<Footer />
{modal && <Modal modalClose={modalClose} />}
</div>
);
}
useState 훅을 사용하여 modal(상태 변수), modal 업데이트하기 위한 함수(setModal)를 정의
-> modal 상태 변수는 모달의 열림/닫힘 상태를 나타내며 초기값은 false로 설정 한다
modalOpen 함수는 모달을 열기 위해 호출되는 함수이다
setModal을 사용하여 modal 상태 변수를 true로 업데이트.
modalClose 함수는 모달을 닫기 위해 호출되는 함수이다
setModal을 사용하여 modal 상태 변수를 false로 업데이트한다
render 함수의 return 에서는 JSX 문법을 사용하여 컴포넌트를 렌더링하게 되는데
Main 컴포넌트에서 modalOpen 함수를 props로 전달하고 있다
modal 변수가 true일 경우에만 Modal 컴포넌트를 렌더링한다
-> 이를 위해 삼항 연산자를 사용한다
modal 변수가 true인 경우에만 {modal && }
표현식이 참이 되어 Modal 컴포넌트가 렌더링된다
Modal 컴포넌트에는 modalClose 함수를 props로 전달하고 있다
if . . .
만약 dday가 !dday 라면 ?
dday가 거짓인 경우 === 빈 값이거나 0, NaN, null, undefined, 또는 false인 경우
!dday는 true가 된다 그럴 경우 조건문에서 !!dday 대신 !dday를 사용했다면
if (2) . . .
그럼 true 를 반환하고 싶으면 그냥 dday 만 쓰면 되지 않을까 ?
dday만 쓰게 되면 결과값이 Infinity 가 나오는 이유는 ?
Infinity ? - 어떤 수를 0으로 나누거나 / 유효하지 않은 수학 연산을 수행한 경우 등에서 발생
dday 값은 Math.ceil(10000 / training)으로 계산되는데
만약 training 값이 0이라면, 10000을 0으로 나누게 되는데, 이는 유효하지 않은 연산이기 때문! JavaScript에서 0으로 나누면 결과는 -> Infinity
주의사항
1. public 폴더 안에 작업 폴더들을 넣으면 build 폴더에서 경로가 제대로 안나오게 된다
원래는 웹팩 번들링 돼서 경로를 제대로 보여주지 않기 위해 난수가 적용이 되는데
public에 따로 작업 폴더를 넣기 되면 무시가 된다
그래서 public에 넣어둘 경우 무시되어서 못 찾아서 사용자에게 404가 뜰 수도 있다2. input 의 value로 useState 초기값을 연결시켜놓고 변화가 있을때 onChange가 실행되어 작동하게 한다
value를 넣지 않는 경우가 많은데 넣어야 연결에 안정적이다
예외처리로 submit 눌렀을때 disabled 를 걸어주면 클릭했을때
아무 동작이 하지 않으면 사용자는 무언가 잘못되거나 고장 난거라 생각 하게 된다
disabled는 쓰지 말기! 실행되는 예외처리되는 작업으로 만들어야한다 (ex-경고창)3. 컴포넌트를 너무 많이 쪼개는 것이 아닐까 ?
컴포넌트를 나눌때 컴포넌트 각 폴더안에 구현되는 파일들을 넣어주는 것도 좋다
그것은 아래의 링크를 참고하라
컴포넌트를 파편화하는 방법론 →
아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그
