React 파해치기

1. React 에서의 "컴포넌트"는 HTML을 반환하는 함수 

 

2. React의 장점은 화면 추력에 특화된 프레임워크 

리엑트 컴포넌트는 간단한 예시를 들어 

어릴때 가지고 놀던 레고라고 생각하면 된다.

하나하나 차례대로 원하는 부위에 원하는 것만 넣을수 있다는것.

위에 말했듯이 리엑트는 HTML을 반환하는 함수라고 지칭했다. 만약에 

나는 nav부분만 가져오고싶어, 또는 나는 footer 부분만 가져오고 싶어 한다면 다른거 필요없이 

원하는 것만 가져오면 된다는 것이다.

 

3. JSX는 뭔가요?

JSX는 기존 자바스크립트 구문이 아닌 syntax가 아니지만 사용할수 있도록 하는  자바스크립트의 extension중 하나이다.

JSX는 React에서 사용하는것이 대표적인데 Babel 이란 자바스크립트 컴파일러를 이용하여 자바스크립트 내에서 

JSX,HTML태그를 사용 할 수 있다.

다만 주의해야할점은 닫아주지 않아도 되는 태그들, 하나만 예시로 든다면 

<img src="이미지 주소" alt="뭐시기뭐시기"> 기존에는 이런식으로만 써도 됐는데

JSX에서는 

1. <img src="이미지 주소" alt="뭐시기뭐시기"></img>

2. <img src="이미지 주소" alt="뭐시기뭐시기" />

이런식으로 닫아줘야 오류가 나지않는다

꼭유의하며 작성 해야한다. 

 

4.왜 제이쿼리나 핸들바보다 리엑트?

제이쿼리나 핸들바의 자식노드가 수정되는 방법은 상위 계층을 수정하면 그 하위계층도 무조건적으로 수정이 된다고

말할수 있다. 하지만 React는 다르게 "다음에 나타날 화면의 일부(노드)" 를 미리 그려놓고 변경된 화면의 일부(노드)만

수정 하는 가상화면 virtual DOM(말 그대로 실존하지않는 문서 객체 모델)을 사용하기 때문에 장점이 될 수 있다고 생각한다.

5.리엑트에서의 스타일링 하는 방법

 

질문

의견이 필요합니다. 여러분은 어떻게 리액트 스타일을 쓰시나요?
컴포넌트 각각에 CSS를 적용하나요?
하나의 큰 CSS 파일을 쓰시나요?
SASS로 관리하시나요?
CSS 모듈로 관리하나요?
아니면 Styled-component를 쓰나요?

답변 by Saransh Bansal

• 컴포넌트 각각에 CSS를 쓰는 것이 가장 일반적이긴 합니다.
• 하나의 큰 CSS 파일을 만드는 것은 가독성이 떨어지고, 관리하기도 어렵고, 분명히 확장성에도 한계가 있습니다.
• SASS는 좋은 방법이지만 SASS를 새로 익히는 시간이 들어갑니다. 다시 한번 말하지만 하나의 큰 파일에 쓰는 것은 쓸모 없습니다.
  (SASS를 사용한다면 모듈을 잘 분리하라는 뜻 같네요— 역자 주)
• Styled-component는 그저 혼란스럽습니다. 인라인 CSS스타일에 비해 나쁠 것은 없지만, 필요한 것보다 더 많은 코드를 쓰게 될 수 있습니다. 이것이 어떻게 컴포넌트 각각 CSS를 사용하는 것과 다른지 모르겠습니다.
• CSS Modules 는 쓸데없이 복잡합니다.
  (className을 사용해 모듈처럼 적용하는 방법을 말하는 것 같습니다. 동명의 라이브러리도 있네요 — 역자 주)

 

Question

Need your opinion.
Whats your way to style reactjs?
Per component css?
One big css file?
Through sass?
Css modules?
Styled-component?

Answer

- Per component css is pure boilerplate.
- One big css is hard to read, not maintainable and certainly unscalable.
- sass is good but there is a learning curve. Again, it is useless if you write it in one big file.
- styled components are pure mess. There is nothing worse than inline css. Plus you write more than needed. How is it different from per component css ?
- css modules: needlessly complicated.

I use a combination of few things prioritising READABILITY over anything else and avoiding boilerplate as much as i can.

I write 1 css file per block of my web page.
Ex. A common table.css file for any part of the page that use tables.
A common layout.css file for header, footer and outermost container related css.
A common basic.css for styling all the basic elements ex. anchor links, fonts, buttons, paragraphs, colors etc.
And then some specific css files for components which are huge and heavily decorated.

All that plus throwing in some sass magic and avoiding boilerplate as much as possible. I would call it “modular css”

출처