React 1장

Mijeong Ryu·2023년 10월 21일

mac 개발자도구 단축키 : alt + cmd + i
href 태그 : 하이퍼참조, 밑줄 그어짐
li태그 : list(목록) 의 약자
ul태그 : 순서 정해져 있지 않은 목록의 약자
ol태그 : ordered list 순서가 정해진 목록의 약자
a태그 : 앵커태그, 다른 페이지나 같은 페이지의 특정 위치, 파일 등 다른 url로 연결할 수 있는 하이퍼링크를 만드는 기능

==========================================================

시작

서버기동 : 터미널 > npm start
접속주소 : http://localhost:3000/
리액트의 입구파일 : index.js
접속 주소로 접속시, npm start명령어를 이용해서 app을 구동하면 이 도구는 index.js를 찾고, 이 파일에 적혀있는대로 동작
디자인 수정 : app.css / 모든건 import 한 위치 보고 찾아가기

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

<App/ > 이라는 태그를 ID 값이 root인 태그로 렌더링 하라는 코드 >>> 그렇다면 ID값이 root인 태그는 어디에 있는가?? : public이라는 폴더의 index.html에 존재

==========================================================

배포하기

crtrl C로 개발환경 종료 > npm run build 명령어 입력 (빌드 명령어) : 빌드를 마치면 프로젝트에 build 폴더가 생기고, build 폴더에는 index.html을 의존하는 다른 파일들이 존재
그리고 이 폴더의 파일엔 공백이 없다! (배포할 때는 공백같은 요속 필요 없기 때문에 파일의 용량을 줄이기 위해서)

npm install -g serve
serve -s build

==========================================================

컴포넌트 만들기

다시 기동할 때 npm start 하고 하면 됨!
'리액트는 사용자 정의 태그를 만드는 기술이다'
리액트에서 사용자 정의 태그를 만들 때는 함수를 정의하는데, 반드시 대문자로 시작해야함
예를들어 header는 기본 태그이고 Header는 사용자 정의 태그이다.
사용자 태그의 내용을 바꾸면, 사용자 태그를 사용한 모든 소스코드 한번에 변경 가능

==========================================================

props

리액트의 props는 일반적으로 생각하는 params와 같은 느낌
대신 {props.title}과 같이 중괄호로 감싸줘야 한다.
중괄호로 감싸주면 중괄호와 중괄호 사이에 있는 정보는 일반적인 문자열이 아니라 표현식으로 취급
const로 선언하면 나중에 변형할 수 없다. 코드가 튼튼해진다!

반복문 안에서는 key값을 설정해주어야 하고, 이 key 값은 반복문 안에서 고유해야한다.

==========================================================

이벤트

기본적으로 a태그는 클릭시 페이지가 이동되는데, 페이지가 이동되지 않도록 하기 위해 아래와 같은 코드를 작성했다.

 <h1><a href="/" onClick={function(event){
          event.preventDefault();

그리고 onClick 함수 호출시 Header에 props로 전달된 onChangeMode가 가리키는 함수를 호출시키고자 했다.

function Header(props){
  return(
    <header>
      <h1><a href="/" onClick={function(event){
          event.preventDefault();
          props.onChangeMode();
        }}>{props.title}</a></h1>
    </header>
  )
}

위 코드는 아래와 같이 화살표로 축약 가능하다.

function Header(props){
  return(
    <header>
      <h1><a href="/" onClick={(event)=>{
          event.preventDefault();
          props.onChangeMode();
        }}>{props.title}</a></h1>
    </header>
  )
}

event.target : target은 이벤트를 유발한 태그를 의미한다.
props.onChangeMode()가 호출 될 때 App에 있는 onChangeMode의 alert이 불러지는 것!

==========================================================

state

리액트의 입출력. 입력 = props
prop과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴 값을 만드는 또 다른 데이터 = state
prop과 state의 차이점 : prop은 컴포넌트를 사용하는 외부자를 위한 데이터, state는 컴포넌트를 만드는 내부자를 위한 데이터
State를 사용하려면 먼저 임포트를 하고 useState라는 훅을 사용해야함(훅 : 리액트에서 제공하는 기본적인 함수)
useState:배열을 리턴한다.

0번째 원소 : 상태의 값을 읽을 때 쓰는 데이터
1번째 원소 : 상태의 값을 변경할 때 사용하는 함수

function App() {
  const [mode, setMode] = useState('WELCOME');
  const topics = [
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'javascript', body:'javascript is...'}
  ]
  let content = null;

  if(mode === 'WELCOME'){
    content = <Article title="Welcome" body="Hello, Web"></Article>
  } else if(mode === 'READ'){
    content = <Article title="Welcome" body="Hello, Read"></Article>
  }
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        setMode('WELCOME');
        }}> 
      </Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        setMode('READ');
      }}></Nav>
      {content}
    </div>
    );
}

setMode로 인해 mode의 값이 READ로 바뀌면 APP 컴포넌트가 다시 실행된다.
그러면서 useState가 mode값을 READ로 설정해주고, mode의 값이 READ이므로 content가 바뀐다.

==========================================================

Create

placeholder : 사용자가 어떤 정보를 입력해야하는지 안내하기 위해 사용. 글 입력시 사라짐

function Create(props){
  return(
    <artecle>
      <h2>Create</h2>
      <form onSubmit={event=>{
        event.preventDefault();
        const title = event.target.title.value;
        const body = event.target.body.value;
        props.onCreate(title, body);
      }}>
        <p><input type="text" name="title" placeholder="title"/></p>
        <p><textarea name="body" placeholder="body"></textarea></p>
        <p><input type="submit" value="Create"></input></p>
      </form>
    </artecle>
  )
}