1주차 Front-E 스터디 TIL React

이번에는 1주차 Front-E 스터디를 진행했다.

먼저 리액트 설치를 하였다!
자세한 사항은 아래 벨로그에서 친절하게 설명해준다!

https://velog.io/@nxnaxx/React-개발-환경-구축-yarn과-CRA-설치

오늘 배운 것을 알아보도록 하자!

1. 인라인 styling

import React from "react";

function Hello(){
	return(
    	<div style={{marginTop: '10px',backgroundColor:'pink'}}>
        	hello world!
        <div/>
    );
}

export default Hello;

속성명은 CSS와 다르게 CamelCase 로 작성해야 한다.

똑같은 코드를 기반으로 style객체를 사용하면 된다.

const PracticeStyle ={
	marginTop: '10px',
    backgroundColor: 'blue'
};

return (
	<div style={PracticeStyle}>
    	hello world!
    </div>

	);
}
export default Hello;

객체(class와 동일한 개념)를 사용. 스타일 속성에 객체를 사용
마찬가지로 Camel Case로 작성

똑같은 코드를 기반으로 css파일을 import한다

import React from "react";
import "./Hello.css";

return (
	<div className="red">
		hello world;
   	</div>
	);
}
export default Hello;

css 와 다른 속성명과 속성값을 언제 다 외우냐....
안되는 것도 많네 참....
styled-component가 해결해준다.

npm install styled-components
or
yarn add styled-components
를 해서 styled-components를 설치해준다.

기본 사용법 component = styled.element

import React from 'react'
import styled from 'styled-components'

function Hello() {
  return (
    <Container>
      <Box bgColor="royalblue"/>
      <Box bgColor="deeppink"/>
      <Circle bgColor="gold"/>
    </Container>
  );
};

const Box=styled.div`
  background-color: ${(props)=>props.bgColor};
  width: 100px;
  height: 100px;
  border-color:15px;
`;

const Circle =styled(Box)`
  boder-radius:50px;
`;

export default Hello

Custom Component를 상속하여
컴포넌트에 상세한 로직이 필요할 때
유용하게 사용 가능하다!

위의 이미지를 리액트로 짜보는 실습을 진행했다!
바로 만들지는 못했는데
다음에 코드를 올리도록 하겠다!