🚀 JavaScript this와 바인딩 완벽 가이드

📌 this란 무엇인가?

this는 자바스크립트에서 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 **자기 참조 변수(self-reference variable)**입니다.

🔑 핵심 개념

• this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다
• "누가 나를 불렀냐" - 선언이 아닌 호출에 따라 달라짐
• 함수를 실행하는 환경(호출하는 방법, 환경)이 달라지면 this도 변합니다

---

🎯 this 바인딩의 4가지 패턴

1. 전역 호출 (Global Invocation)

전역에서 함수를 호출하거나 단독으로 this를 사용할 때, this는 전역 객체를 가리킵니다.

// 브라우저 환경에서 전역 this
console.log(this); // Window 객체

var globalVar = 'Global';
var x = this;
console.log(x === window); // true

function globalFunction() {
    console.log(this); // Window 객체
    console.log(this === window); // true
}

globalFunction();

📝 설명:

• 브라우저 환경: window 객체
• Node.js 환경: global 객체
• strict mode에서는 undefined

---

2. 메서드 호출 (Method Invocation)

객체의 메서드로 함수를 호출할 때, this는 해당 메서드를 소유한 객체를 가리킵니다.

// 기본 메서드 호출
var person = {
    name: 'Kim',
    sayHello: function() {
        console.log(this); // person 객체
        console.log('Hello, ' + this.name); // Hello, Kim
    }
};

person.sayHello(); // person 객체가 this

// 중첩된 객체에서의 메서드 호출
var company = {
    name: 'TechCorp',
    employee: {
        name: 'Lee',
        introduce: function() {
            console.log(this); // employee 객체 (직접적인 소유자)
            console.log('I am ' + this.name); // I am Lee
        }
    }
};

company.employee.introduce(); // employee가 this

📝 핵심: 점(.) 바로 앞의 객체가 this가 됩니다.

---

3. 함수 내부의 중첩 함수

메서드 내부의 일반 함수는 전역 객체를 참조합니다.

const value = 100;

const myObj = {
    value: 1,
    outerMethod: function() {
        console.log('외부 함수 this.value:', this.value); // 1
        
        // 내부 일반 함수
        const innerFunction = function() {
            console.log('내부 함수 this.value:', this.value); // 100 (전역)
        };
        
        innerFunction();
        
        // 화살표 함수 사용 시
        const innerArrowFunction = () => {
            console.log('화살표 함수 this.value:', this.value); // 1 (외부 스코프 상속)
        };
        
        innerArrowFunction();
    }
};

myObj.outerMethod();

📝 해결 방법:

1. 화살표 함수 사용
2. bind() 메서드 사용
3. 변수에 this 저장 (var that = this)

---

4. 생성자 함수 호출 (Constructor Invocation)

new 키워드와 함께 함수를 호출할 때, this는 새로 생성되는 인스턴스를 가리킵니다.

function Person(name, age) {
    console.log(this); // 새로 생성되는 Person 인스턴스
    this.name = name;
    this.age = age;
    this.introduce = function() {
        return `안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`;
    };
}

const person1 = new Person('홍길동', 30);
const person2 = new Person('김철수', 25);

console.log(person1.name); // 홍길동
console.log(person2.introduce()); // 안녕하세요, 저는 김철수이고 25살입니다.

---

🔗 바인딩(Binding)이란?

바인딩은 this가 특정 객체를 참조하도록 명시적으로 연결시키는 기술입니다.

JavaScript 바인딩 메서드

1. bind() 메서드

var obj = {
    name: 'Original',
    sayName: function() {
        console.log('My name is ' + this.name);
    }
};

// 일반 호출 - this 손실
var detachedMethod = obj.sayName;
detachedMethod(); // My name is undefined

// bind()로 바인딩
var boundMethod = obj.sayName.bind(obj);
boundMethod(); // My name is Original

// 다른 객체에 바인딩
var anotherObj = { name: 'Another' };
var anotherBound = obj.sayName.bind(anotherObj);
anotherBound(); // My name is Another

2. call() 메서드

function greet(greeting, punctuation) {
    console.log(greeting + ', ' + this.name + punctuation);
}

var person = { name: 'Alice' };

// call로 즉시 실행하며 this 바인딩
greet.call(person, 'Hello', '!'); // Hello, Alice!
greet.call(person, 'Hi', '.'); // Hi, Alice.

3. apply() 메서드

function introduce(hobby1, hobby2) {
    console.log(`저는 ${this.name}이고, ${hobby1}와 ${hobby2}를 좋아합니다.`);
}

var person = { name: '박민수' };

// apply로 배열 형태의 인수 전달
introduce.apply(person, ['독서', '영화감상']); 
// 저는 박민수이고, 독서와 영화감상을 좋아합니다.

📝 차이점:

• bind(): 새로운 함수를 반환 (나중에 호출)
• call(): 즉시 함수 실행, 인수를 개별적으로 전달
• apply(): 즉시 함수 실행, 인수를 배열로 전달

---

⚛️ React에서의 바인딩

함수형 컴포넌트에서의 이벤트 바인딩

import React, { useState } from 'react';

function ColorChanger() {
    const [color, setColor] = useState('white');
    const [message, setMessage] = useState('초기 메시지');

    // 이벤트 핸들러 함수
    const handleColorChange = () => {
        setColor(color === 'white' ? 'blue' : 'white');
    };

    const handleMessageChange = (newMessage) => {
        setMessage(newMessage);
    };

    return (
        <div>
            <button 
                onClick={handleColorChange} 
                style={{ backgroundColor: color, padding: '10px' }}
            >
                배경색 변경
            </button>
            
            <button onClick={() => handleMessageChange('클릭됨!')}>
                메시지 변경
            </button>
            
            <p>{message}</p>
        </div>
    );
}

클래스형 컴포넌트에서의 바인딩 이슈

import React, { Component } from 'react';

class EventBindingExample extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            message: 'Hello',
            count: 0
        };
        
        // 방법 1: constructor에서 바인딩
        this.handleClickBound = this.handleClickBound.bind(this);
    }
    
    // 바인딩 없는 메서드 (에러 발생)
    handleClickError() {
        // TypeError: Cannot read property 'setState' of undefined
        this.setState({
            message: 'Error occurred!'
        });
    }
    
    // 방법 1: bind()를 사용한 메서드
    handleClickBound() {
        this.setState({
            message: 'Bound method works!',
            count: this.state.count + 1
        });
    }
    
    // 방법 2: 화살표 함수 (자동 바인딩)
    handleClickArrow = () => {
        this.setState({
            message: 'Arrow function works!',
            count: this.state.count + 1
        });
    }
    
    render() {
        return (
            <div>
                <p>{this.state.message}</p>
                <p>Count: {this.state.count}</p>
                
                {/* 에러 발생 */}
                <button onClick={this.handleClickError}>
                    에러 버튼
                </button>
                
                {/* 올바른 바인딩 */}
                <button onClick={this.handleClickBound}>
                    Bind 버튼
                </button>
                
                {/* 화살표 함수 */}
                <button onClick={this.handleClickArrow}>
                    화살표 함수 버튼
                </button>
                
                {/* 인라인 바인딩 (성능 이슈 있음) */}
                <button onClick={this.handleClickError.bind(this)}>
                    인라인 바인드
                </button>
            </div>
        );
    }
}

---

🛠️ 바인딩 문제 해결 방법

1. Constructor에서 바인딩 (권장)

class MyComponent extends Component {
    constructor(props) {
        super(props);
        
        // constructor에서 한 번만 바인딩
        this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick() {
        // this가 올바르게 바인딩됨
    }
}

2. 화살표 함수 사용 (최신 권장)

class MyComponent extends Component {
    // 클래스 필드 문법과 화살표 함수
    handleClick = () => {
        // 자동으로 this가 바인딩됨
        this.setState({ clicked: true });
    }
    
    render() {
        return <button onClick={this.handleClick}>클릭</button>;
    }
}

3. 함수형 컴포넌트 + Hooks (현재 표준)

function MyComponent() {
    const [clicked, setClicked] = useState(false);
    
    const handleClick = useCallback(() => {
        setClicked(true);
    }, []);
    
    return <button onClick={handleClick}>클릭</button>;
}

 

---

📚 실전 예제: Toggle 컴포넌트

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = { 
            isToggleOn: true,
            clickCount: 0 
        };
        
        // 바인딩 필수
        this.handleToggle = this.handleToggle.bind(this);
    }
    
    handleToggle() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn,
            clickCount: prevState.clickCount + 1
        }));
    }
    
    render() {
        return (
            <div>
                <button onClick={this.handleToggle}>
                    {this.state.isToggleOn ? 'ON' : 'OFF'}
                </button>
                <p>클릭 횟수: {this.state.clickCount}</p>
            </div>
        );
    }
}

// 함수형 컴포넌트 버전 (권장)
function ToggleFunctional() {
    const [isToggleOn, setIsToggleOn] = useState(true);
    const [clickCount, setClickCount] = useState(0);
    
    const handleToggle = useCallback(() => {
        setIsToggleOn(prev => !prev);
        setClickCount(prev => prev + 1);
    }, []);
    
    return (
        <div>
            <button onClick={handleToggle}>
                {isToggleOn ? 'ON' : 'OFF'}
            </button>
            <p>클릭 횟수: {clickCount}</p>
        </div>
    );
}

 

---

🎯 핵심 정리

this 바인딩 규칙

1. 전역 호출: this → 전역 객체 (window/global)
2. 메서드 호출: this → 호출한 객체
3. 생성자 호출: this → 새로 생성되는 인스턴스
4. 명시적 바인딩: bind/call/apply로 지정한 객체

React에서 바인딩

• 함수형 컴포넌트: this 바인딩 불필요 (Hooks 사용)
• 클래스형 컴포넌트: constructor 바인딩 또는 화살표 함수 권장

바인딩 방법 비교

방법	장점	단점
constructor 바인딩	성능 좋음, 한 번만 실행	코드가 길어짐
화살표 함수	간결함, 자동 바인딩	클래스 필드 문법 필요
인라인 바인딩	간단함	매번 새 함수 생성 (성능 저하)

---

💡 추가 팁

1. ES6+ 환경에서는 화살표 함수를 적극 활용하세요
2. 성능을 고려할 때는 constructor 바인딩을 선택하세요
3. 함수형 컴포넌트 + Hooks가 현재 React 개발의 표준입니다
4. strict mode에서는 전역 this가 undefined가 됩니다
5. 디버깅 시에는 console.log(this)로 바인딩 상태를 확인하세요