016. jquery 사용하기, js 세미콜론 규칙, js 함수 구조

PART 1(입문) React.js 시작하기

016. jquery 사용하기

• jquery : 자바스크립트 라이브러리. client 폴더에서 라이브러리 설치 필요

npm install jquery

---

JavaScript/React에서 세미콜론(;) 사용 규칙

✅ 세미콜론 있는 것 → 문장(Statement)

→  한 줄짜리 실행 단위가 끝날 때 ; 붙임

var Map_Arr = [3, 2, 8, 8];        // 변수 선언
let Map_newArr = Map_Arr.map(...); // 변수 선언
console.log("...");                 // 함수 호출
var Obj = {};                       // 변수 선언
Obj[obj.key] = obj.value;          // 값 할당
return obj;                         // return 문

 

❌ 세미콜론 없는 것 → 블록(Block) 또는 선언

 

→ { } 중괄호 블록으로 끝나는 것들은 ; 안 붙임

componentDidMount() { ... }   // 메서드 정의
class R015_Map extends ... {  // 클래스 선언
render() { ... }              // 메서드 정의

핵심 규칙 요약

구분	예시	세미콜론
변수 선언	let a = 1	✅ 필요
함수 호출	console.log()	✅ 필요
값 할당	obj.key = value	✅ 필요
클래스 선언	class Foo { }	❌ 불필요
메서드 정의	render() { }	❌ 불필요
if/for 블록	if (...) { }	❌ 불필요

JavaScript는 사실 세미콜론을 자동으로 삽입(ASI, Auto Semicolon Insertion) 해주기 때문에 생략해도 대부분 동작하지만, 명확성과 버그 방지를 위해 문장 끝에는 붙이는 것이 관례

= 로 값을 담았으면 ; 붙이고, 그냥 선언/정의면 안 붙인다

 

---

JavaScript 함수 구조 정리

1. 기본 함수 선언 방식 3가지

// ① 일반 함수 선언
function myFunc(e) {
    console.log(e)
}

// ② 함수 표현식
const myFunc = function(e) {
    console.log(e)
}

// ③ 화살표 함수 (Arrow Function)
const myFunc = (e) => {
    console.log(e)
}

 

2. 화살표 함수 축약 규칙

// 매개변수 1개 → 괄호 생략 가능
const myFunc = e => { console.log(e) }

// 매개변수 없음 → 괄호 필수
const myFunc = () => { console.log("hi") }

// 매개변수 2개 이상 → 괄호 필수
const myFunc = (a, b) => { console.log(a, b) }

// 본문이 return 한 줄 → 중괄호 & return 생략 가능
const myFunc = (x) => x * 2   // return x * 2 와 동일

3. 코드에서 쓴 구조 분석

// 클래스 안에서 메서드를 화살표 함수로 선언
input_alert = (e) => {
    var input_val = $('#inputId').val()
    alert(input_val)
}

// 호출할 때 인라인으로 화살표 함수 사용
onClick={e => this.input_alert(e)}
// ↑ onClick 이벤트 발생 시 e(이벤트 객체)를 받아서 input_alert에 넘김

 

4. ({}) 구조

객체를 매개변수로 받을 때 구조분해 할당

// 객체를 통째로 받는 경우
const myFunc = (obj) => {
    console.log(obj.name)
    console.log(obj.age)
}

// 구조분해 할당 → 바로 꺼내서 씀
const myFunc = ({ name, age }) => {
    console.log(name)
    console.log(age)
}

// 실제 호출
myFunc({ name: "철수", age: 20 })

React에서 자주 보이는 패턴

// props를 통째로 받기
const MyComponent = (props) => {
    return <h1>{props.title}</h1>
}

// 구조분해로 바로 꺼내기 (더 많이 씀)
const MyComponent = ({ title, name }) => {
    return <h1>{title} {name}</h1>
}