프론트엔드7-4. [React] App.js를 통해서 화면 구성

react 프로젝트 생성 ( VS code에서) : Node.js와 react가 설치되었을 때

1. create-react-app 새로 만들 프로젝트명(폴더명)

• 폴더명을 적을때는 카멜 규칙은 안된다! ex) myReact xx my-react ok

2. 터미널에 새로 만든 프로젝트 경로까지 이동(cd 파일명) npm run start (npm start도 가능하다..)

3. React App 창이 뜨면 성공!

---

1. App.js에서 화면 구성해보기

• 리액트에서 함수 생성하기

function App() {
  
  // 리액트에서 함수 생성하기
  function myWelcom(){
    let hello = "안녕하세요";
    if(true){
      let hello = "hello!";
      console.log(hello); 
    }
    console.log(hello);
    return hello;
  }
  ...
}

export default App;

---

2.   화면에 보여질 구성을 return ( ); 에 설정

function App() {
  
  const name = "리액트"; 
  // 전역변수로 설정(return에서 사용하기 위해

  // 리액트에서 함수 생성하기
  function myWelcom(){
		...
  }
  return (
    <div>
      <h1>인사말</h1>
      <p>welcome page : {name}</p> 
      <ul>
        <li> name : {name}</li>
        <li> welcome : {myWelcom()}</li>
      </ul>
    </div>
  );
}

export default App;

• return( )안에서 주석 금지!!!!
• 변수나 함수는 중괄호 { }안에 사용한다. : {변수이름}  {함수이름( )} 

---

[실행결과]

 

• 콘솔창에 보여지는 hello!는 if문 안에 전역변수로 설정한 hello이고, 안녕하세요는 App 함수 안에 전역변수로 설정한 hello이다. (let은 한 번만 선언할 수 있기 때문에 여기서는 전역변수 hello, 지역변수 hello로 다른 변수이다.)
• 만약 return hello;를 if구문 안에 넣는다면? (밑의 코드처럼)

  // 리액트에서 함수 생성하기
  function myWelcom(){
    let hello = "안녕하세요";
    if(true){
      let hello = "hello!";
      console.log(hello);
      return hello; 
    }

---

[전체코드]

//import './App.css';  스타일을 사용하지 않기때문에 생략해도 실행됨

function Hello() {  // 함수명을 App -> Hello로 변경
  
  const name = "리액트"; 
  // 전역변수로 설정(return에서 사용하기 위해 {변수이름})

  // 리액트에서 함수 생성하기
  function myWelcom(){
    let hello = "안녕하세요";
    if(true){
      let hello = "hello!";
      console.log(hello);
      return hello; 
    }
    console.log(hello);

  }
  return (
    <div>
      <h1>인사말</h1>
      <p>welcome page : {name}</p> 
      <ul>
        <li> name : {name}</li>
        <li> welcome : {myWelcom()}</li>
      </ul>
    </div>
  );
}

export default Hello;  // 함수명을 App -> Hello로 변경

• 함수명을 App( ) { }에서 임의로 바꿔도 된다. 단 export default 뒤에 적는 함수명과는 동일해야 한다!!(외부에 전달하는 함수명이 같아야 하기 때문에)
• 이로써 파일명(App.js)와 파일 안에 적는 함수명이랑은 같이 않아도 된다는 것을 알 수 있다.