React는 페이스북에서 만든 javascript 라이브러리로 코드의 가독성, 재사용성 및 유지보수를 더 용이하게 만들어준다.
🍙 라이브러리란?
재반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것이다. 사용 여부는 코드 작성자 선택사항이며 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않는다.
const hi = <h1>Hi</h1>
javascript의 확장 버전
React.js를 사용하기 위해 JSX 문법이 포함되어 있으면, 해당 파일을 정규 JS 문법으로 변환시키는 컴파일 과정이 필요하다. (JSX는 javascript 문법과는 다르기 때문에 컴파일 시 브라우저에서 읽지를 못하기 때문)
const hi = <p>Hi</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li>programming</li>
};
HTML을 javascript 내에 써준게 JSX.
변수에 저장은 물론, 함수의 인자로도 사용 가능!
const hi = <input readOnly={true} />;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li className="list-item">programming</li>
};
태그에 속성(attribute)값을 주고 싶을 때는 항상 " "로 감싸줘야 한다.
다만, HTML에서 사용하는 속셩명과는 다를 수 있으니,사용 시에는 공식문서를 참고하자.
React 또는 HTML 요소(element) 등이 그려저 실제로 눈에 보이느 과정
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
React 요소가 DOM Node에 추가되어 렌더링 되기 위해서 ReactDOM.render
함수가 필요하다.
첫 번째 인자 = JSX (React 요소)
두 번째 인자 = 첫 번째에서 받은 인자를 render 하고 싶은 container(부모 요소)
component란 재사용이 가능한 UI 단위이다.
동일 코드가 반복되는 부분을 하나의 component로 만들어서 같은 디자인의 요소가 필요할때마다 재사용이 가능하다.
component는 독립적이고, 재사용 가능한 코드로 관리 가능하다.
하나의 컴포넌트에 필요한 HTML, css, JS를 모두 합쳐서 만들 수도 있다.
이러한 Component의 성질은 우리가 알고있는 function
과 유사한데, 컴포넌트 역시 인자(input)를 받을 수 있고(props
) (react element
)가 return 된다.
function Welcome(props){
return <h1>Hellow {props.name}</h1>;
}
React.Component
를 상속해서 만들어야 한다.
render()
메서드가 필수이며 return도 해줘야 한다.
- 다른 메서드들도 있으나, 필수는 아니다!
class Welcome extends React.Component(){
render(){
return <h1>Hellow {this.props.name} </h1>
}
}
🌰 똑같은 컴포넌트라면 함수로 만드는게 더 편한 방식 아닌가 싶다. 성능이나 기능상의 차이점도 추후에 알아봐야 겠다
정의한 컴포넌트는 함수 또는 class의 이름으로 사용할 수 있다.
우리가 정의한 컴포넌트를 사용할때는 원하는 attribute를 얼마든지 추가할 수 있다.
추가한 attribute는 parameter로 전달되어 사용되어 진다. 이를 props
라고 하는 것이다.
.(dot)으로 속성명에 접근가능하고, props.속성명 으로 속성값을 가져올 수 있다.
// 1. Welcome 컴포넌트 정의
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 2. App 컴포넌트 정의
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
// 3. 화면에 React 요소 그려주기
ReactDOM.render(
<App />,
document.getElementById('root')
);
App 컴포넌트(부모)에서 내가 만들어준 Welcome 컴포넌트를 사용했다. name
이라는 attribute를 사용해 주었다.
내가 만들어준 Welcome 컴포넌트는 부모 컴포넌트에서 보내준 attribute name
을 props로 받아 사용하였다.
ReactDom.render 함수로 React 요소를 그려준다. 여기서는 'root'라는 id를 찾아 App 컴포넌트(부모)를 그려주는 것이다.
말 그대로 component의 '상태값'을 의미한다.
state
/ component
둘 다 화면에 나타내줄 정보(상태)를 가지고 있다느 점에서 비슷하다. ( 둘 다 object )
props는 부모 컴포넌트에서 전달해 주어야만 사용 가능하다.( 함수의 parameter 처럼)
state는 컴포넌트 내에서 정의하고 사용할 수 있다.
< 예시 >
class Button extends React.Component {
constructor() {
super();
this.state = {
clicked: false
}
}
render() {
return (
<div
className="btn"
onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
>
{this.state.clicked ? '좋아요' : '싫어요'}
</div>
);
}
}
ReactDOM.render(
<Button />,
document.getElementById('root')
);
onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
setState
명령어를 통해 상태값을 변경시켜 주는 것이다. true면 false, false면 true!constructor()
constructor() {
super();
this.state = {
clicked: false
}
}
super()
: React.Component
class의 메서드들을 사용하기 위해 꼭 붙여줘야 한다.
this.state
: 최초에 상태이다. 버튼을 클릭 하기 전 clicked의 상태를 false로 설정.
class Button extends React.Component {
constructor() {
super();
this.state = {
clicked: false
}
}
render() {
return (
<div
className={`btn ${this.props.type === 'like' ? 'like-btn' : ''}`}
onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
>
{this.state.clicked ? '좋아요' : '싫어요'}
</div>
);
}
}
ReactDOM.render(
<Button type="like" />,
document.getElementById('root')
);
${this.props.type === 'like' ? 'like-btn' : ''}
Button type을 props로 전달해 this.props.type
이 like이면 'like-btn'이 클래스 명으로 바뀌는 것이다.
이를 통해 css 변경 가능!