본문 바로가기

강좌

React - { 단순하게 보는 props 사용 흐름 } props, state 그리고 redux.... 변수, 인수, 저장소로 전달하고 전달받고.. 어떻게 구분해서 써야 할까.. 명확한 성격과 구분은 찾기 어렵거나 개발스러운 경직된 문서가 전부처럼 느껴지는 건 필자의 과장일까? 각설하고 일단 props부터 개단순하게 짚고 넘어가기다. Title, Body, Button 이란 3개의 컴포넌트로 구성된 Card 라는 컴포넌트를 만들 경우, 먼저 3개의 자식 컴포넌트를 만들고 props 인자를 작성합니다. // 여기선 사용하기 쉬운 함수형 컴포넌트로 만듭니다. (ES6 기준의 화살표 함수로..) // React 공식 문서에서 함수형 작성을 권장합니다. // 아래 예제는 편의상 3개 컴포넌트 파일을 모두 기재했습니다. // Title.js import React f.. 더보기
입문 Sass(SCSS), 그리고 작성 방법론 BEM Sass(SCSS) Sass를 알아가기 전에 잡썰 잠깐 풀어 보겠습니다. 마이크로 프로젝트에 CSS를 작성하는 건 그리 어려운 일도 아닐뿐더러 딱히 Less, Sass 등의 전처리기를 고려할 필요도 없을 것입니다. 하지만 추후 서비스가 확장되거나 규모가 큰 협업 프로젝트에서 CSS 코드가 기하급수적으로 늘어나는 상황이라면.. 변경/추가 사항이 생기거나 디자인이 바뀔 경우, 상당한 단순노동의 수고를 해야 하거나 디버깅이 어려운 CSS의 늪에 빠지게 되고 결국 중복된 오버라이딩과 !important를 남발하게 됩니다. Sass는 이러한 문제를 해결해 줄까요? 두말 하면 잔소리, 충분히 가려운 부분을 긁어줄 수 있을 뿐만 아니라 더 재미있는 코딩생활 가능! 장점 CSS의 재활용성을 높여줍니다. 코드의 계층과 .. 더보기