코딩앙마 리액트 강좌 정리 (1)

리액트

• 리액트는 페이지단위로 html을 작성하는게 아니라, 컴포넌트 단위로 코드를 작성 (헤더 컴포넌트, 광고 컴포넌트, 언론사 목록 컴포넌트 등) -> 비슷한 역할을 하는 컴포넌트들을 여러 창에서 재사용 가능
• 컴포넌트  = ui를 구성하는 개별적인 뷰 단위
• 함수형 컴포넌트 = 컴포넌트가 함수로 표현되어 있고, return값으로 jsx를 반환하는 컴포넌트
• 모든 함수형 컴포넌트 이름은 대문자로 시작하는 것이 문법 (컨벤션이 아닌 문법 ! -> html과의 구별을 위한 것 . html 태그는 소문자로, 컴포넌트는 대문자로 표현 )
• 컴포넌트는 함수형이 아닌 클래스형도 있지만, 지금은 대부분 함수형을 사용
• 함수형 컴포넌트들은 jsx를 리턴함 (html처럼 생긴)
• jsx = javascript extension : js의 확장 문법. js코드를 html처럼 표현하고, 빌드 시 babel에 의해 자바스크립트로 변환됨 (JSX 문법이 함수형 컴포넌트의 return 값으로 들어와서, UI를 보여줌)
• jsx 문법에서, 중괄호 내부에서 변수 사용 가능 (예 : {name} )
• 단 객체는 { } 로 사용 불가함, 대신 객체의 특정 프로퍼티에 접근해서 사용은 가능

 
 

이벤트 처리

1) 미리 함수를 만들어 놓고 전달

사진과 같이, 이벤트처리가 필요한 요소에 onClick = {함수명} 과 같은 형식으로 사용한다
만약 { } 부분에 showName() 으로 적으면, 함수 자체가 아닌 그 함수가 반환하는 값을 의미한다
 
2) onClick = {  }에서 { } 내부에 함수를 직접 작성

이 방식의 장점은 매개변수를 전달하기 편하다는 것
 
 
 
 

또다른 예제 : e.target.value는 이벤트객체의 값을 의미

 
 
 

 

React Hooks : useState ,useEffect ...

 
함수형 컴포넌트 : fuction에서 인자로 props를 받고, jsx를 return한다
hook 이란 ? 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수
 
 

state

• 컴포넌트의 속성값 -> 이 속성값이 변하면 리액트는 자동으로 ui를 업데이트 시켜줌 
• 동적 데이터를 다루는 방식으로서, useState hook을 통해 사용한다
• 변경이 가능한 데이터

 
위의 코드로는, 버튼을 아무리 눌러도 mike라는 글자가 변하지 않는다
사실 콘솔을 찍어보면 name변수의 값은 바뀌었는데, 화면이 업데이트 되지 않은 것이다
이것이 react에서 일반 변수가 아닌 state를 사용하는 이유이다 
 
react의 rendering 기준은 state의 변화이다 ! state가 변화할때만, 화면을 update 시켜준다
 
이를 위해 우리는 react의 useState라는 hook을 사용한다
 
 

useState (상태값 관리를 위해 사용하는 훅)

• useState는 배열을 반환한다
• 반환하는 배열의 첫 요소는 name (state), 두번째는 state값을 변경해주는 함수
• 배열 구조분해 할당 문법을 사용함 (useState함수가 반환하는 배열을 분해해서, 첫 요소는 state로, 두번째 요소는 state값을 변경하는 함수로 할당)
• 이제 두번째 요소의 함수(setName) 가 호출되어 state가 바뀌면, 리액트는 해당 컴포넌트를 다시 렌더링 해줌
• useState의 () 안에는 초기값이 들어가면됨
• 같은 컴포넌트를 여러개 쓴다면, 그 컴포넌트들의 state는 각각 관리됨

배열 구조 분해 할당

 
 

props : properties의 약자로, 속성값 이라는 의미

• props는 정적 데이터로서, (cf. state는 동적 데이터) 부모컴포넌트가 자식에게 넘겨준 데이터
• 값을 변경하지 않고, 부모 컴포넌트에게 받기만 하는 데이터 
• 만약 props의 값을 변경하고 싶다면 state를 다시 만들어야함 (단 이렇게 하더라도 부모에게 받은 값 자체를 변경하는 것이 아니고, 자식의 state값을 바꿔주는거임)
•  

hello 컴포넌트 호출부에서 props로 age를 준 상황

 

props로 받은 값을 state로 변경하는 예시

매개변수로 age만 넘어가고 있기 때문에 위와같이 변경 가능

위의 사진에서 사용한 { } 는, 객체 구조 분해의 예시이다 (매개변수로 전달받은 값이, 이 컴포넌트의 age라는 변수에 담겨 hello 함수 내에서 age 변수로 부모 컴포넌트에서 전달된 age속성을 사용 가능하게 됨)

 

• 컴포넌트가 가진 state를 props로 넘길 수도 있다

 
useState를 사용해서 단어 뜻을 보이게-> 안보이게를  계속 전환하는 코드
뜻보기 버튼이 눌릴때마다 토글메소드로 isShow의 상태값을 바꾸고, 상태값이 true일때만 word.kor를 보이게 함
 
 
 

useEffect - lifecycle 제어 함수

• 어떤 상태값이 바뀌었을때 동작하는 함수를 작성할 수 있는 hook (화면에 변화가 생길때마다 특정 작업을 수행해야하는 경우에 사용) 
• 첫번째 매개변수로 함수를 넣음 (콜백)
• 두번째 매개변수는 의존성 배열 : 어떤 state에 의존하여 component를 update할지 결정 (두번째 인자가 없다면, 화면이 리렌더링 될때마다 매순간 호출될 것 / 두번째 인자가 빈 배열이라면, 최초 렌더링 시 1회만 callback함수 실행 - 상태값과 무관하게 화면이 처음 렌더링된 직후에만 사용하면 되는 경우) -> 배열 안에 나열된 요소 중 하나가 변화하면 callback함수를 실행

 
 
 
 
+ map함수를 사용하면 html 구조에서 어떤 요소를 반복적으로 생성해야 할때 유용함
 
https://codingapple.com/unit/nextjs-map/

html을 반복문으로 줄이고 싶으면 map - 코딩애플 온라인 강좌