[React] Antd - 동적 Collapse 항목 Default Activation

 <Collapse
                defaultActiveKey={!docs?null:docs.doc_content.map((k,i)=>i)}
                onchage={callback}
                style={{margin : "16px" }}
              >
              {!docs?null:docs.doc_content.map((k,i)=>(
                <Panel header = {"Title " +i} key ={i}>
                  <p>{docs?docs.doc_content[i].sec_desc:""}</p>
                </Panel>
              ))}
              </Collapse>

0. 배경

React 사용하다 보니, 태그자체를 필요한 경우에만 동적으로 뿌리는게 매력이 있었다.

과거 프로젝트는 주로 정적인 페이지, 혹은 grid 내 data의 갱신만 ajax에 따라 뿌려주는 경우가 많았는데. react를 이용하면 상기와 같이 특정 태그/컴포넌트 자체를 로드하거나, 조건을 따지는 등의 활용성이 보였는데.

 

1. Antd

디자인 라이브러리. 중국쪽인듯. 기본적으로 가져오니 panel, layout등 굵직한 로딩에 편리하고 8px단위 디자인 배치 가능

 

2. 상기 코드 어디에 쓰나

1) collapse의 default activate를 모두 activate하기위한 전략

2) !docs? : docs== null인경우, tag를 불러일으킬때 문제 발생, 해당 경우를 방지하기 위해 삼항연산자 및 null check.이후 map 이용한 배분.