일반적으로 퍼블 html 마크업시 id 나 class 는 별 제약없이 작업을 한다면

리엑트 개발단에 넘겨줄 때는 각 모듈형식으로 사용하기 편하게 class 를 짤라서 전달해달라는데

정확하게 이해를 좀 시켜주실 분 계신가요?

어쨋든 wrap 클래스가 있어야 하고 그 안에 또 어떤 클래스들로 작성을 하게 되는데 자꾸 더 짤라 달라는데

음 ..

아래 마크업이 리엑트 개발자들이 불편한 마크업인가요?

아래 마크업이 늘  하던 마크업인데 자꾸 뭘 짤라 달라는지..

ex)

<div class="dataFiled" style="display:none">
                        <ul>
                            <li>
                                <h4>Jornal Name</h4>
                                <div class="data">
                                    <div class="txtBox">Chiral Alkyl Amine Synthesis via Catalytic Enantioselective Hydroalkylation of Enamides</div>
                                </div>
                            </li>
                            <li>
                                <h4>Others</h4>
                                <div class="data">
                                    <div class="txtBox">Chiral Alkyl Amine Synthesis via Catalytic Enantioselective Hydroalkylation of Enamides</div>
                                </div>
                            </li>
                            <li>
                                <h4>Others</h4>
                                <div class="data">
                                    <div class="txtBox">Chiral Alkyl Amine Synthesis via Catalytic Enantioselective Hydroalkylation of Enamides</div>
                                </div>
                            </li>
                        </ul>
                    </div>

<style>

.PdfDocument .contents-Recognition .resultWrap .dataFiled { background:#f9f9f9; border-radius:1rem; padding:1rem;  }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li { padding:1rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li:hover { background:rgba(229, 229, 230, 0.6); border-radius:1rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li h4 { font-size:1.4rem; font-weight: 500; color:#000; margin:0 0 1.2rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data { display:flex; align-items:center; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .img { width:18rem; height:18rem; border-radius:1rem; border:1px solid #cdcdcd; background:#fff; margin-right:2rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .img img { width:100%; height:100%; object-fit:contain; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .arrow { width:4rem; height:4rem; background:url('../../assets/images/ico-data-arrow.png') 0 0 no-repeat; margin-right:2rem; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .txt { flex:1; font-size:1.4rem; font-weight:300; color:#050505; }
.PdfDocument .contents-Recognition .resultWrap .dataFiled li .data .txtBox { width:100%; padding:2.2rem 2.4rem; font-size:1.4rem; font-weight: 300; color:#000; border-radius:1rem; border:1px solid #cdcdcd; background:#fff; }

</style>