[React] 변수, &&/||, 이벤트 함수

• 변수 선언 후 변수명으로 값 출력
  • let 변수명 = “값”;
  • 태그 안에서 {변수명} 으로 출력
  • {} 안에서 연산, 조건식(삼항연산자)도 가능
• ``
  • 문자열과 변수값 함께 출력 가능
  • 문자열 ${변수명} 형태
  • ex) alert(이름: ${name}\\n별명: ${nickname});

 

• &&, ||
  • &&
    • 값이 조건을 만족할 때 출력
    • {조건식 && “조건 만족시 출력할 값”} 형태
    • ex) <h1>{name === "홍길동" && "홍길동입니다."}</h1>
  • ||
    • 값이 있으면 해당 변수 출력, 없으면 주어진 값 출력
    • {변수 || “변수 값이 없으면 출력할 값”} 형태
    • ex) <h1>{nickname || "닉네임이 없습니다."}</h1>

 

• 이벤트 함수
  • 이벤트로 받는 값을 가져온다.
  • 예시
    • 키보드 입력: e.key
    • 값: e.target.value
  • 함수 예시
    • 엔터키를 쳤을 때 onClick() 실행

      • const onEnter = (e) => {
            if (e.key === "Enter") {
              onClick();
            }
          };

    • 값을 입력했을 때 해당 값으로 set
      • onChange={(e) => setName(e.target.value)}
    • 값이 배열일 때 각각의 값으로 set

      •  const onChange = (e) => {
            setForm({
              ...form,
              [e.target.name]: e.target.value,
            });
          };