React 컴포넌트 스타일 이해하기 1
컴포넌트 이해 2
컴포넌트에서 개별적인 속성을 정의할 수 있다.
ReactDOm에서 호출된 컴포넌트에서 전달한 속성은 {this.props.propsValue} 방식으로 전달 받는다.
여기서 this는 아래의 HelloReact 컴포넌트를 의미한다. 이런 작업을 binding, 바인딩이라고 한다!
전달받은 속성은 중괄호를 사용해서 렌더링하고, 이런 방식을 JSX의 표현식 이라고 한다
1
<div id="root"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class HelloReact extends React.Component {
render() {
return <p>Hello React {this.props.type}</p>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
<HelloReact type="type1" />
<HelloReact type="type2" />
<HelloReact type="type3" />
<HelloReact type="type4" />
<HelloReact type="type5" />
</div>
);
또한, props는 여러 개를 추가할 수 있다.
1
<div id="root"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class HelloReact extends React.Component {
render() {
return (
<p>
Hello React {this.props.type} {this.props.user}
</p>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
<HelloReact type="type1" user="kim" />
<HelloReact type="type2" />
<HelloReact type="type3" />
<HelloReact type="type4" />
<HelloReact type="type5" />
</div>
);
React 컴포넌트 스타일 이해하기 2
컴포넌트 이해하기
ReactDOM에서 추가된 HTML 구조는 {this.props.children} 방식으로 전달 받는다
사용 예시 1:
1
<div id="root"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
class Button extends React.Component {
render() {
return <button type={this.props.attr}>{this.props.children}</button>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
<Button attr="button">Button</Button>
<Button attr="reset">Reset</Button>
<Button attr="submit">Submit</Button>
</div>
);
inline CSS
CSS 방식은 Inline 방식을 사용한다
1
2
3
4
5
display: inline-block; -> display: "inline-block",
margin: 10px; -> margin: 10,
margin: 0 auto; -> margin: "0px auto";
padding: 10px; -> padding: 10,
background-color: #fff; -> backgroundColor: "#fff",
사용 예시:
1
<div id="root"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Alphabet extends React.Component {
render() {
let alphabetStyle = {
display: "inline-block",
margin: 10,
padding: 10, // backgroundColor: "#eaeaea"
backgroundColor: this.props.bgColor
};
return <div style={alphabetStyle}>{this.props.children} </div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
<Alphabet bgColor="#eaeaea">A</Alphabet>
<Alphabet bgColor="#ccc">B</Alphabet>
<Alphabet bgColor="#999">C</Alphabet>
</div>
);