JSX란?
React의 CSS(CSS-IN-JS) - emotion
이렇게 태그에 의미를 부여할 수 있어서, 태그만 봐도 무엇을 의미하는지 예상을 할 수 있다. 또한, className을 입력하지 않아도 되기 때문에, 코드 길이기 짧아져 가독성이 좋아진다다.
CSS-IN-JS활용
다음은 직접 작성한 코드
export default function emotionPage() {
return (
<Wrapper>
<LargeBox>
<Title>게시물 등록</Title>
<User>
<Writer>
<SmallTitle>작성자</SmallTitle>
<InputContent placeholder ="이름을 적어주세요."/>
</Writer>
<Password>
<SmallTitle>비밀번호</SmallTitle>
<InputContent type="password" placeholder ="비밀번호를 적어주세요."/>
</Password>
</User>
<PostName>
<SmallTitle>제목</SmallTitle>
<InputContent placeholder = "제목을 작성해주세요."/>
</PostName>
<PostContent>
<SmallTitle>내용</SmallTitle>
<InputContent placeholder ="내용을 작성해주세요."/>
</PostContent>
<br/>
<Address>
<SmallTitle>주소</SmallTitle>
<Search>
<AdNum>12345</AdNum>
<SearchAdNum>우편번호 검색</SearchAdNum>
</Search>
<Blank></Blank><br/>
<Blank></Blank>
</Address>
<br/>
<YouTube>
<SmallTitle>유튜브</SmallTitle>
<InputContent placeholder ="제목을 작성해주세요."/>
</YouTube>
<br/>
<Picture>
<SmallTitle>사진 첨부</SmallTitle>
<PictureSetting>
<PlusImages>+<br/>Upload</PlusImages>
<PlusImages>+<br/>Upload</PlusImages>
<PlusImages>+<br/>Upload</PlusImages>
</PictureSetting>
</Picture>
<MainSetting>
<SmallTitle>메인 설정</SmallTitle>
<SelectMainSetting>
<input type ="radio" name="mainsetting"/> 유튜브
<input type ="radio" name="mainsetting"/> 사진
</SelectMainSetting>
</MainSetting>
<SignUp>등록하기</SignUp>
</LargeBox>
</Wrapper>
)
}
최대한 직관적으로 변수명을 만들고자 했지만 쉽지가 않았다. 역시 이름정하는게 가장 어려운것같다. 좀 더 센스있고 알아보기 쉬운 이름을 지을 수 있게 책이라도 읽어야하나...
저도 이름 정하는건 정말 어려운거같아요 힣
충분히 센스있고 직관적인 이름을 잘 생각해내실거에요 홧팅!!