본문 바로가기

분류 전체보기

 (104)
[React Exam 27] 조건부 렌더링 1 React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. if, switch, 삼항연산자, &&(AND), || (OR) 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용할 수 있습니다.  조건이 참인 경우만 렌더링을 수행합니다.    if(조건){        return  결과;    }else{        return null;    } 변수 또는 식의 결과가 값과 일치 할때 만 렌더링을 수행합니다.    switch(변수 또는 식){    case 값1:      return  결과1;    case 값2:      return  결과2;    default:        return  null;    } 삼항 연산자를 이용..
[React Exam 26] <React.Fragment> vs <Fragment> vs <> 모든 함수의 리턴은 1개 만을 넘겨줄수 있기 때문입니다. 여러개를 리턴해야 하는 경우에는 묶어서 전달해줘야 한다는 것입니다. 마찬가지로 react에서도 컴포넌트가 여러 요소를 리턴할 때는 반드시 하나의 루트 태그로 감싸서 리턴해야 합니다. 보통의 경우 우리들은 여러개를 묶어서 리턴할 때는 div 태그를 주로 사용합니다. 그런데 이럴 경우 다른 요소의 내부로 들어가야 하는 경우에는 문제가 발생하게 됩니다.아래가 문제가 생기는 경우 입니다.                         한사람            18세            남자                또는                        아이템 1            아이템 2            아이템 3            아이..
[JavaScript] 콜백 지옥 (Callback Hell) 경험해 보기 콜백 지옥이란 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.         document.write("출근 과정 : ")            gotoWork("일어나고", function(message){                gotoWork("세면하고", function(message){                    gotoWork("식사하고", function(message){                        gotoWork("양치하고", function(message){                            gotoWork("환복하고", function(message){                ..
[JavaScript] call() & apply() & bind()의 사용 2 자바스크립트 모든 함수에는 모든 매개변수를 받아주는 arguments라는 숨겨진 매개변수가 존재 합니다. arguments라는 숨겨진 매개변수는 배열처럼 사용하지만 배열은 아니고 유사 배열입니다.        function exam01() {            console.log(`typeof : ${typeof(arguments)}`);            console.log(`typeof : ${typeof({name:'한사람'})} : ${{name:'한사람'}}`);            console.log(`typeof : ${typeof([1,2, 3, 4])} : ${[1,2, 3, 4]}`);            console.log(`arguments(유사배열) : ${argume..
[JavaScript] call() & apply() & bind()의 사용 자바스크립트에서 함수를 호출하는 방법은 네가지가 있습니다.함수를 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과, call, apply 그리고 bind메서드를 이용하는 방법이 있습니다. 보면 call은 보통 함수와 똑같이 매개변수를 콤마로 구분해서 넣고, apply는 매개변수를 하나로 묶어 배열로 만들어 넣는 것을 알 수 있습니다. 그리고 bind() 메서드는 this를 정의하고 나서 그 함수를 복사해 새로운 함수를 만들어 리턴 하는 겁니다. 그래서 bind를 호출하고 다시 실행을 해야만 합니다.그렇다면 call과 apply 그리고 bind가 공통적으로 가진 null 인자의 역할은 뭘까요? 바로 this를 대체하는 겁니다. 다음을 보겠습니다.        // 함수 선언        const fn1 ..
[JavaScript] 콜백(Callback) 함수 5(this 문제점) 이처럼 단순히 함수의 파라미터에 함수를 넘겨주면 끝이라 생각하기 쉽지만  자바스크립트의 콜백 함수 이용에는 몇가지 조심해야 할 주의점이 있습니다. 다음을 보겠습니다. 함수에서 this는 무엇일까요?       function fn1() {            console.log(`선억적 함수 this : ${this}`);            console.log(this);        }        let fn2 = () => {            console.log(`화살표 함수 this : ${this}`);            console.log(this);        }        // 함수에서 this는 기본적으로 전역객체의 window로 정해져 있습니다.        fn1()..
[JavaScript] 콜백(Callback) 함수 4(활용 사례) 1. ​이벤트 리스너로 사용로 사용            let button = document.querySelector("#btn1");            button.addEventListener('click', ()=>{                alert('눌렀냐!!!')            });            document.querySelector("#btn2").addEventListener("click", function(){                alert(`${this.innerText}!!!` );            });2. 고차함수에 사용 고차 함수(Higher-Order Function) 라는 용어를 얼핏 들어본 적이 있을 것입니다. 고차 함수란, 함수를 파라미터..
[JavaScript] 콜백(Callback) 함수 3(인사하기) 콜백함수의 또다른 예제 입니다.하나의 함수가 환영인사와 마지막 인사를 모두 수행합니다. ex03.html 파일을 다음과 같이 만듭니다.12345678910111213141516171819202122232425262728293031323334353637!DOCTYPE html>html lang="en"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>자바스크립트 콜백 함수 란?/title>    script>        function say_hello(name) {            document.write(`"${name}"님 안녕하세요. 반갑..

티스토리툴바