CODE_PLAN

• SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어 입니다.

사용하는 이유 : css가 그렇게 복잡한 언어는 아니지만 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생기게 됩니다. 예를 들어 기존의 CSS는 불필요한 선택자(Selector), 연산 기능 한계, 구문(Statement)의 부재의 문제점이 있고 SASS와 SCSS는 이러한 이슈를 해소시켜줄 수 있습니다.

- SASS / SCSS 의 작동원리 

SASS, SCSS를 CSS pre-processor(전처리기)라고도 하는데 스크립팅 언어이기 때문에 SASS, SCSS로 작성된 파일들은 곧바로 웹에 적용될 수는 없습니다. 웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용하게 된다고 합니다.

사용예) 

1. SCSS 

2. SASS 

처음에는 SASS / SCSS 가 무엇인지 몰르고 막상 어려운것인줄 알았는데 

SASS / SCSS 를 조사해보며 CSS와 차이점도 같이 알아보고 결과적으로 SASS / SCSS가 어떻게 쓰는지 알게되고 어려운것이 아니라고 이해할수 있었습니다.

참고) 

https://cocobi.tistory.com/118

api를 통해서 받아온것으로 활용하는데 css를 설정해도 전체적으로 먹혀서 따로 js파일(더미데이터)로 작성해서 map 으로 받아오게해서 하는게 쉬울듯합니다.

카운터 값 조작하기

기본 예제

body {
  counter-reset: section;                       /* counter 이름을 'section'으로 지정합니다.
                                                   초깃값은 0입니다. */
}

h3::before {
  counter-increment: section;                   /* section의 카운터 값을 1씩 증가시킵니다. */
  content: "Section " counter(section) ": ";    /* section의 카운터 값을 표시합니다. */
}

<h3>Introduction</h3>
  <h3>Body</h3>
  <h3>Conclusion</h3>

참고> 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters#%EC%B9%B4%EC%9A%B4%ED%84%B0_%EA%B0%92_%EC%A1%B0%EC%9E%91%ED%95%98%EA%B8%B0

위 코드와 같이 작성하면 밑과같이 나오게 할수있다.

배열이 고정적이라면 상관없겟지만, 배열의 인덱스를 하나하나 조회해가면서 렌더링하는 방법은 동적인 배열을 렌더링하지 못합니다.

동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수 map() 을 사용합니다. 

map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어줍니다. 리액트에서 동적인 배열을 렌더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해주면 됩니다.

리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야 합니다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다. 지금의 경우엔 id 가 고유 값입니다.

만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 map() 함수를 사용 할 때 설정하는 콜백함수의 두번째 파라미터 index 를 key 로 사용하면 됩니다.

<div>
  {users.map((user, index) => (
    <User user={user} key={index} />
  ))}
</div>

참고> 

https://react.vlpt.us/basic/11-render-array.html

내용물 자체는 미완성이지만 우선 슬라이더 기능구현한 내용을 남겨놓을려고 해서 올린글입니다.

https://velog.io/@navyjeongs/%EB%A6%AC%EC%95%A1%ED%8A%B8-export-default%EC%99%80-export%EC%9D%98-%EC%B0%A8%EC%9D%B4

위블로그에 잘 나와있는것 같아서 우선 참고했다 .