코딩애플 리엑트 강의 듣고 혼자서 기록하는 것 입니다.
강의 내용 출처는
https://codingapple.com/course/react-basic/
모든 저작권은 코딩애플에게 있습니다.
1. HTML을 변경시키고 싶다.
-> innerHTML
documnet.getElementById('id이름').innerHTML = '바꾸고싶은 내용'2. HTML 누르면 무언가 실행되고 싶다 ?
-> addEventListener
documnet.getElementById('id이름').addEventListener('동작', function()
{ 동작이 일어나면 작동하고싶은 내용 })function이라고 안하고
documnet.getElementById('id이름').addEventListener('동작', () =>
{ 동작이 일어나면 작동하고싶은 내용 })이렇게 화살표라고 해도 된다.
3. 잠깐 자료를 저장하고 싶다
-> 변수 만들기
변수 선언 종류
- var
- let
- const
4. 긴 코드를 축약하고 싶다.
-> function 만들기
function 함수이름(파라미터) { 함수 내용 }이렇게 함수는 만들어지며 함수의 내용이 필요한 부분에 함수 이름을 가져다 쓰면 된다.
5. 함수를 좀 다양하게 쓰고싶다.
-> 파라미터 활용
예를들어
함수이름(안녕);
function 함수이름(파라미터) { 파라미터로 InnerHTML 바꿔주세요 }이렇게 되어있으면 고정된 내용으로 HTML을 바꿔주는 것이 아니라
파라미터가 입력된 값으로 HTML을 변경해준다.
6. 여러개의 자료를 저장하고싶다.
-> array, object 사용
var name = ['kim', 'lee', 'park'];대괄호 [ ] 에 여러가지 자료들을 넣으면 array 자료형이고
var minsu = { name : 'kim',
age : 20 }이렇게 index를 붙여서 저장해주는 것이 object 자료형이다.
이렇게 저장한 자료를 꺼내올 때는
name이렇게 하면 kim, lee, park 이렇게 나온다.
나는 name array중에 몇번째 자료를 가지고 오고싶다.
name[0]이렇게 indexing을 하면 1번째 자료만 뽑아서 가져올 수 있다.
그러면 object 자료형은 어떻게 하냐
minsu.age이렇게 하면 minsu라는 object에서 age라는 부분만 뽑을 수 있다.
7. 코드를 조건부로 실행하고 싶다.
-> if / else 조건문 사용하기
if (조건식)
{ 참일 경우 실행 }
else
{ 위 조건식이 거짓일 경우 실행 }이렇게 어떠한 조건이 참일 경우에만 코드를 실행시킬 수 있다.
조건식은 연산자들을 활용해서 쓰면 된다.
잘 모르겠으면 참고해보자
조건을 여러 개 검사하고 싶으면 else if문을 사용하면 되는데
if (조건식)
{ 참일 경우 실행 }
else if (조건식) // 위에 if가 거짓이면 이것도 검사해주세요
{ 참일 경우 실행 }
else
{ 위 모든 조건식이 거짓일 경우 실행 }이렇게 사용하면 되고 else if는 계속 달아도 된다.
8. 반복되는 작업을 한번에 하고싶다.
-> for 반복문 사용
for ( var i = 0; i < 3; i++)
{
실행하고싶은 내용
}기본적인 for문 구조인데
i는 0이고
i가 3이 되기 전까지 (위 코드에서는 0,1,2 의 경우) 까지만 실행해주시고
한번 반복문이 돌 때마다 i는 1씩 늘어납니다. (0, 1, 2가 되고 3에서는 거짓이므로 중단)
forEach라는 반복문도 있는데 array 자료형 앞에 붙인다.
[1,2,3,4].forEach(function(파라미터)
{ 반복하고싶은 내용 });왼쪽에 있는 자료의 개수만큼 반복이 되는것이다.
파라미터는 array안에 있는 자료가 되는데 위 코드에서는 1, 2, 3, 4가 되겠다.
