React 기본 특징

1. Single Page Application

페이지 내부에서 원하는 데이터만 업데이트 해줄 수 있다. 그로인해 페이지 전환을 부드럽게해줄 수 있어서 사용자의 사용성을 높일 수 있다.

2. Component

컴포넌트기능으로 html의 재사용성이 편리해서 웹페이지의 구조를 짜기 쉬워진다.

• html 태그들을 넣을 function을 만들고 컴포넌트명이 될 함수명은 첫글자를 대문자로 작성한다.
• return() 내부에 축약할 html들을 담는다.
• 하나의 태그 안에 들어가야할 내용들을 작성 해준다.
• 작성하고 싶은 곳에서 html태그 형식으로 작성 해준다.

function App() {
  let [title, setTitle] = useState([
    "Hello",
    "World!"
  ]);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      <div className="list">
        <h4>
          {title[0]}
        </h4>
        <p>4월 25일 발행</p>
      </div>
    </div>
  );
}

위 예시를 보면 App컴포넌트 내부에 비슷한 html문법들이 있다. 원하는 html내용들을 컴포넌트화 시켜 사용하면 편리하고 코드 가독성도 높여 사용할 수 있다.

function Day(){
return(
	<div className="list">
        <h4>
          {title[0]}
        </h4>
        <p>4월 25일 발행</p>
	</div>
	)
}

• App 컴포넌트의 밖에서 만들어 주어야 한다.

그 후 사용하고싶은 곳에서 Day컴포넌트를 사용하면 작성해준 html내용들이 들어가게 된다.

function App() {
  let [title, setTitle] = useState([
    "Hello",
    "World!"
  ]);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      <Day></Day>
      <Day/>
    // 두가지 형식으로 사용 가능하다.
    </div>
  );
}

3. state

useState를 컴포넌트 안에서 호출 하는것은 state라는 변수를 선언하는 것과 같고 변수 이름은 원하는 이름으로 짓는다. 일반적인 변수는 끝날 때 사라지지만 state변수는 React에 의해 함수가 끝나도 사라지지 않는다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false); 

  // 위의 코드를 풀어쓰면 아래와 같다.
  const stateHookArray = useState(false); 
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked를 변경하는 함수
• useState : state hook
• false : state 초기값

체크박스 예시로 input 속성에 onChage를 이용해 사용자가 체크박스 클릭 했을때 발생하는 이벤트 값이 onChage속성에 넣어준 handleChecked에 전달이 되고 isChecked값을 갱신 시켜주는 setIsChecked값을 호출하게 된다. 이 결과에 따라 React는 새로운 isChecked변수를 CheckboxExample컴포넌트에 넘겨 다시 렌더링 한다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
    
    // 삼항연산자를 이용해 체크박스가 체크가 되었을때는 Checked!!, 체크가 풀릴때는 Unchecked을 같이 보여준다.
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

4. props

Props는 컴포넌트의 속성을 의미한다. 부모 컴포넌트에서 받은 전달받은 속성이다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child />
    </div>
  );
};

function Child() {
  return (
    <div className="child">I'm the eldest child</div>
  );
};

Props 속성을 이용해 Child컴포넌트에 'I'm the eldest child'와 같은 값으로 바꿔주려면

<Child text={"I'm the eldest child"} />

• 부모 컴포넌트에 자식 컴포넌트로 들어가있는 Child 컴포넌트 이름 옆에
  속성을 선언하고 "I'm the eldest child" 문자열을 할당한다. 주의해야될 점은 중괄호{} 묶어줘야 된다.

그리고 Chile컴포넌트에 props라는 매개변수를 넣어준 뒤 dot notation을 이용해 props의 속성값에 접근을 한다. 매개변수에 꼭 props를 넣어줘야되는것은 아니지만 개발자들 사이에서 관습적인 작명법이기 때문에 지켜주는게 좋을것 같다.

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
};

Child컴포넌트에 또 다른 문자열을 추가할 수도 있다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      <Child text={"Hello World!"} />
    </div>
  );
}

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}