react_기본개념 익히기(2)

4. 컴퍼넌트

function Hello() {
    return (
        <h1>Hello, noji</h1>
    )
}
const element = <Hello />

ReactDOM.render(element, document.getElementById("root"));

export default Hello

• 이 코드는 React.js를 사용하여 "Hello, noji" 라는 제목을 가진 h1 요소를 렌더링하는 함수 Hello()를 정의하고, 이를 <Hello /> 라는 컴포넌트로 사용하고 있습니다.
• 그리고 ReactDOM.render() 메소드를 사용하여 <Hello /> 컴포넌트를 렌더링하고, 이를 페이지의 id가 "root"인 요소에 추가하고 있습니다.
• 또한, export default Hello 구문은 Hello 함수를 다른 파일에서 사용할 수 있도록 내보내기 위한 구문입니다.
• 따라서 이 코드는 React를 사용하여 "Hello, noji" 라는 제목을 가진 요소를 렌더링하고, 이를 웹 페이지에 추가하는 컴포넌트를 생성하고, 이를 다른 파일에서 재사용할 수 있도록 내보내는 것입니다.

 

function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}

function App(){
    return (
        <div>
        <Welcome name = "noji" />
        <Welcome name = "arara" />
        <Welcome name = "njy" />
        </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

• 이 코드는 React.js를 사용하여 props를 이용한 컴포넌트 통신을 사용하는 방법을 보여주고 있습니다.
• Welcome 함수는 props를 받아서 해당 props의 name을 사용하여 "Hello, {name}"의 형태로 반환하는 컴포넌트입니다.
• App 함수는 Welcome 컴포넌트를 세 번 사용하여, name props를 각각 "noji", "arara", "njy"로 설정한 후, div 요소 안에 이들을 포함시키고 있습니다.
• 마지막으로, ReactDOM.createRoot 메소드를 사용하여 root 변수를 생성하고, root.render 메소드를 사용하여 App 컴포넌트를 렌더링하고 있습니다.
• 이 코드를 실행하면 "Hello, noji", "Hello, arara", "Hello, njy"라는 세 개의 제목이 포함된 <div> 요소가 웹 페이지에 표시됩니다. 이때, Welcome 컴포넌트는 props를 사용하여 상위 컴포넌트에서 전달받은 데이터를 출력하는 역할을 하고 있습니다.

 

5. props

function Hello(props){
    return <h1>Hello, {props.name}</h1>
}
const element = <Hello name="njy" />

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);

• 이 코드는 React.js를 사용하여 props를 이용한 컴포넌트 통신을 사용하는 방법을 보여주고 있습니다.
• Hello 함수는 props를 받아서 해당 props의 name을 사용하여 "Hello, {name}"의 형태로 반환하는 컴포넌트입니다.
• const element = <Hello name="njy" /> 구문은 Hello 컴포넌트를 사용하여 name props를 "njy"로 설정한 element 변수를 생성하는 구문입니다.
• 마지막으로, ReactDOM.createRoot 메소드를 사용하여 root 변수를 생성하고, root.render 메소드를 사용하여 element를 렌더링하고 있습니다.
• 이 코드를 실행하면 "Hello, njy"라는 제목이 포함된 <h1> 요소가 웹 페이지에 표시됩니다. 이때, Hello 컴포넌트는 props를 사용하여 상위 컴포넌트에서 전달받은 데이터를 출력하는 역할을 하고 있습니다.

 

function formatDate(date){
    return date.toLocaleString();
};

function Comment(props){
    return (
        <div>
            <div>{formatDate(props.date)}</div>
            <div>{props.text}</div>
            <div>3</div>
            <div>4</div>
        </div>
    )
}

const comment = {
    date : new Date(),
    text : "이해했습니다.",
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Comment date={comment.date} text={comment.text} />);

 

• 이 코드는 React.js를 사용하여 props를 이용하여 컴포넌트에 데이터를 전달하고, 이를 출력하는 방법을 보여주고 있습니다.
• formatDate 함수는 date 객체를 받아서 toLocaleString() 메소드를 사용하여 해당 객체를 지역 시간 문자열로 변환하여 반환합니다.
• Comment 함수는 props를 받아서 props.date와 props.text를 사용하여, formatDate 함수를 이용하여 날짜를 포맷팅하고, 해당 컴포넌트에 전달된 props.text를 출력하는 컴포넌트입니다.
• const comment = { date : new Date(), text : "이해했습니다." } 구문은 date와 text라는 프로퍼티를 가진 comment 객체를 생성하는 구문입니다.
• 마지막으로, ReactDOM.createRoot 메소드를 사용하여 root 변수를 생성하고, root.render 메소드를 사용하여 Comment 컴포넌트를 렌더링하고 있습니다. Comment 컴포넌트에 comment 객체의 date와 text를 전달하고 있습니다.
• 이 코드를 실행하면 "이해했습니다."라는 텍스트와, comment 객체의 date를 지역 시간 문자열로 변환한 결과가 포함된 <div> 요소가 웹 페이지에 표시됩니다. 이때, Comment 컴포넌트는 props를 사용하여 상위 컴포넌트에서 전달받은 데이터를 출력하는 역할을 하고 있습니다.