출처 : 소플의 처음만난 리액트 (도서)
리액트에서 가장 중요한 부분!!!!!!!!!!! 컴포넌트와 props
컴포넌트에 대해 알아보기
리액트에는 컴포넌트 기반(component-based)의 구조라는 중요한 특징이 있다.
리액트 컴포넌트가 해 주는 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해 주는 것이다.
리액트 컴포넌트는 만들고자 하는 대로 props(속성)를 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어 주는 것이다.
Props에 대해 알아보기
property의 준말. 즉 리액트에서는 속성이라는 뜻으로 사용. 리액트 컴포넌트의 속성이다.
컴포넌트의 모습과 속성을 결정하는 것이 props이고 props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트의 객체이다.
Props의 특징
All React components must act like pure functions with respect to their props.
모든 리액트 컴포넌트는 그들의 props에 관해서는 Pure 함수 같은 역할을 해야 한다.
모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄 것
리액트 컴포넌트의 props는 바꿀수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 한다.
props 사용법
function App(props) {
return (
<Profile
name = " 낯선개발자 "
introduction="안녕하세요. 낯선개발자입니다."
viewCount={1500}
/>
);
}위 코드는 App 컴포넌트가 나오고, 그 안에서 Profile 컴포넌트를 사용하고 있다. Profile 컴포넌트에 name, introduction, viewCount 라는 세 가지 속성을 넣었다.
중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다. props에 값을 넣을 때에도 문자열 이외에 정수, 변수, 그리고 다른 컴포넌트등이 들어갈 경우에는 중괄호를 사용해서 감싸주어야한다.
- chat 해석
컴포넌트 만들기
함수 컴포넌트
리액트의 컴포넌트를 일종의 함수라고 보고 있다.
function Welcome(props) {
return <h1>안녕, {props.name} </h1>;
}위 코드에는 Welcome이라는 함수이다. 이 함수의 경우 하나의 props객체를 받아 인사말이 담긴 리액트 엘리먼트를 리턴하기 때문에 리액트 컴포넌트라고 할 수 있다. 이렇게 생긴 것을 함수 컴포넌트라고 부른다.
클래스 컴포넌트
리액트 초기 버전에서는 클래스 컴포넌트를 주로사용 했지만 불편하다는 의견이 나와 함수 컴포넌트로 개선이 되어 주로 사용하고 있다고 한다.
class Welcome extends React.Component {
render() {
return <h1> 안녕, {this.props.name}</h1>;
}
}함수 컴포넌트와 가장 큰 차이점은 리액트의 모든 클래스 컴포넌트는 React.component를 상속 받아서 만든다는 것.
아울러 컴포넌트의 이름은 항상 대문자로 시작해야 된다.
컴포넌트 랜더링
컴포넌트를 만들 이후 실제로 렌더링하려면 렌더링을 위해서는 가장 먼저 컴포넌트 엘리먼트를 만든 후 렌더링하면 된다.
function Welcome(props) {
return <h1> 안녕, {props,name}</h1>;
}
const element = <Welcome name ="인제" />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);예시 코드를 보면 Welcome이라는 함수 컴포넌트를 선언하고 있다.
컴포넌트 합성
여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것. 위 Welcome 컴포넌트를 사용해서 예시를 들면,
function Welcome(props) {
return <h1> 안녕, {props,name}</h1>;
}
function App(props) {
return (
<div>
<Welcome name = "Mike" />
<Welcome name = "Steve" />
<Welcome name = "Jane" />
</div>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);App이라는 컴포넌트는 Welcome 컴포넌트 세 개를 포함하고 있는 컴포넌트가 된다.
실습 댓글 컴포넌트 만들기
이제 vscode에서 react 실행하는 건 쉽게 할수 있다. 위 처럼 초기 세팅해주고, 생각보다 rsf 템플릿이 편하긴하네..
그리고 가끔 경로가 안불러와져서 import가 안되는데 잘 확인하고 실행할 것.
CommentList 컴포넌트를 실제로 화면에 렌더링하기 위해 index.js 파일을 수정한다.
댓글 데이터를 별도의 객체로 분리해서 동적으로 받아온 데이터를 표시할 수 잇는 구조를 만들어 본다. comments라는 배열을 만들어서 댓글 데이터를 담고 있는 객체를 넣어주고, 자바스크립트 배열의 map() 함수를 써서 각 댓글 객체에 대해서 Comment 컴포넌트를 리턴하도록 코드를 작성한다.
위 코드에서 변형한 것이다.
css 코드를 추가하게 되면 위 처럼 화면에 보이게 된다.
