미누에요

현재 개인적으로 공부 차 프로젝트를 진행 중인데, 이 프로젝트 중 Button 컴포넌트를 제작하고 있었다. 현재 TypeScript + module.scss를 사용하고 있는데, tsx 파일에서 특정 색상값을 변수 형식으로 넘겨주고, scss 파일에서 해당 값을 사용하고 싶었다.즉, tsx에서 변수를 넘겨받아 scss에서 사용하고 싶었던 것이다. const ImageCircle = styled.div` --size: ${props => props.size}px; width: var(--size); height: var(--size); border-radius: var(--size); background-image: url(${props => props.src}); backg..

Props 란 ? 컴포넌트(사용자 정의 태그를 만들기 위한 함수)에 속성값을 받는 매개변수 함수에서의 매개변수(Parameter)와 인수(Argument) 대부분의 프로그래밍 언어에서는 위 그림처럼 매개변수(Parameter)와 인자(Argument)가 존재한다. React에서의 Props 함수에서와 마찬가지로, React의 컴포넌트(Components)가 함수와 비슷한 목적을 지니고 있다고 했으므로 React props는 컴포넌트(Components)의 매개변수(Parameter)인 셈이다. function Header(props) { return ( {props.title} ); } function App() { return ( ); } 컴포넌트 이름 뒤에 괄호로 props라는 값이 들어간 것을 확인..

컴포넌트란 ? 사용자 정의 태그를 의미한다. 컴포넌트 사용의 장점 코드 양의 간소화 같은 기능의 재사용으로 인한 효율성 증가 web 위와 같은 html 태그에서, header 부분을 우리가 임의로 함수처럼 정의하여 사용하고 싶을 때, 우리는 컴포넌트를 생성한다. function Header(props) { return ( {props.title} ); } 위와 같이 Header라는 컴포넌트를 만들었고, return 값으로 우리가 묶고 싶은 태그들을 넣었다. 이로써 우리는 Header라는 태그만 작성하면 3줄의 태그들이 담긴 코드를 사용할 수 있는 것이다. 위와 같이 사용자가 정의하여 코드들을 기능별로 묶어둔 것을 컴포넌트(Components)라고 한다. 강의들에서 다들 복잡하게 설명하여 어렵게 느껴졌는데..