01.05 - 01.11
상표명, 로고, 종류를 등록하는 페이지 3개 퍼블리싱

1단계 : 컴포넌트 계층 구조로 나누기

모든 페이지 공통 컴포넌트 : 상단바, 안내문구 + 로고, 다음 버튼
상표명 페이지 컴포넌트 : + 상표명 등록 컴포넌트
상표 로고 페이지 컴포넌트 : + 이미지 업로드 컴포넌트
상표 종류 페이지 컴포넌트 : +드롭다운 (+버튼)컴포넌트의 테이블 컴포넌트

모든 페이지 공통 컴포넌트 : 상단바, 안내문구 + 로고, 다음 버튼

이렇게 공통 컴포넌트들과 만들어야 하는 페이지들 파일을 만들었다.

2단계 루트 만들기

function App(){
return(

    <div>
        <h1>React Router Dom</h1>
        <ul>
            <li><NavLink exact to="/">Home</NavLink></li>
            <li><NavLink to="/topics">Topics</NavLink></li>
            <li><NavLink to="/contact">Contact</NavLink></li>
        </ul>
        <Routes>
            <Route exact path="/"><Home> </Home></Route>
            <Route path="/topics"><Topics> </Topics></Route>
            <Route path="/contact"><Contact> </Contact>**</Route>
            <Route path="/brandregister"><BrandRegister></BrandRegister></Route>
            <Route path="/brandlogoregister"><BrandLogoRegister></BrandLogoRegister></Route>
            <Route path="/brandcategoryregister"><BrandCategoryRegister></BrandCategoryRegister></Route>**
            <Route path="/">Not found</Route>
        </Routes>
    </div>
)

첫 페이지인 HOME에서 상품 등록하기 버튼을 누르면 다음 페이지로 넘어가도록 Link와 Route를 활용했다. page마다 path를 설정했는데 하다보니 매번 이렇게 한다면 index.js가 너무 무거워질 거 같다. 다른 방법이 없는지 찾아봐야겠다.

+(다른 FE분이 index에 라우터를 넣으셨다. 항상 app.js에 넣어서 이렇게 해도 문제가 없는지 조마조마하는 중이다)

3단계 컴포넌트 만들기

styled components를 사용했다.
이 라이브러리는 컴포넌트를 생성하면서 css를 입힌다.
생성과 동시에 css를 입히다보니 자식 태그를 만드는 방법을 몰라서 애먹었다.

문제1
1. css로 자식 태그를 만드는 방법이 없고
2. 컴포넌트를 생성한 다음에 styled(컴포넌트)로 꾸미는 방법을 사용했을 때는 꾸미기 전 컴포넌트와 꾸민 컴포넌트를 export해도 import한 다른 파일에서 인식을 하지 못했다.

해결방법
다른 사람들이 만든 코드를 참고해보니 export용 컴포넌트 하나 안에 꾸민 컴포넌트들을 태그처럼 사용하고 그 안에 자식 태그를 직접 생성하는 것 같았다.

뭔가 근본적인 해결방법이 아닌 거 같아서 찝찝하긴 하지만 일단은 잘 작동한다.

문제2
자식 셀렉터의 자식 셀렉터 잡기

해결방법
자식을 잡고(>.자식className) 그 안에서 또 자식을 잡았다. (>.후손className)

문제3
페이지 넘버를 props로 받았는데 01, 02, 03식으로 넘기니까 아래 오류가 떴다.

Octal literals are not allowed in strict mode

출처 https://min9nim.github.io/2019/07/octal-literals-strict/

010 과 같은 리터럴을 사용할 때 만날 수 있는 오류
기존js :
0으로 시작하면 8진수,
0x10 같이 0x 로 시작하면 16진수 표기

ES6:
8진수 표기를 0o10
16진수는 0x10
2진수는 0b10

es6 모듈을 정의하는 경우 모듈의 스코프는 자동으로 strict 모드가 되는데 특별히 strict 모드에서는 이전의 010 과 같은 8진수 표기법을 애매한 표기법으로 규정해 사용하지 못하게 했다.

해결방법

그러므로 strict 모드에서 eval(‘010’) 과 같은 표기법은 사용이 불가(eval 에서 '010' 을 010으로 평가하기 때문에)
약간의 꼼수를 사용해 eval(‘000’*1) 와 같이 하면 오류없이 10진수 변환이 됨

라고 구글링한 결과 나왔는데 나는 그냥 문자열로 표기했더니 해결됐다.

문제4
가장 상위 div(root 아래 div)에 기본으로 내장되어 있는 css reset

해결방법

/ http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

문제5
드롭다운 만들기

해결방법

버튼을 클릭하면 드롭다운의 display: none이 block으로 바뀌도록 해야 한다.

1. 상태가 변하는 것이므로 state 변수 display를 설정한다
   처음에는 드롭다운 내용이 보이지 않으니까 false로 초기값을 설정한다

2. onClick 이벤트 발생 시 변수가 바뀌는 것이므로 이벤트 핸들러 함수에 setState를 넣는다
   setState는 state변수가 false면 true로 갱신하고 vice versa이기 때문에 !display로 내용을 넣는다

3. styled component를 사용하고 있기 때문에 css에 props를 전달해서 삼항연산자를 활용한다
   해당 컴포넌트인 DropdownContent의 속성display의 값으로 display를 넣고 컴포넌트 생성 시 props로 전달한다. display가 true면 block, false면 none인 삼항연산자를 설정한다

문제6
dropdowncomponent를 data에 있는 배열+map으로 여러개 생성하려는데 하위 컴포넌트인 dropdowncomponent 파일에서 사용한 state가 걸린다. 하위 컴포넌트의 상태가 상위에 영향을 미치는 상태 끌어올리기인가? 그럼 속성으로 이벤트 핸들러를 주고 하위컴포넌트에서 실행 시 상위에서 작동하도록 연결만 하면 되나?

즉 상위에서 이벤트 핸들러, state를 정의하고
하위 컴포넌트에서 작동할 수 있도록 import하고
onClick = {() => 이벤트 핸들러함수()}식으로 전달해주면 되나??

4단계