나디아 성장 일기

map() / 블로그 글 개수만큼 html 생성하기 map( ) : array 자료 개수만큼 함수 안의 코드를 실행해주는 함수 JSX 안에서 for문, if문 사용 ❌ 👉 map( ) 사용 ⭕ map( ) 함수를 쓰면 그 자리에 array[ ]가 남음 콜백 함수를 사용해야 함 [ ].map (function( ) { return ( 반복할 코드 ) }); 함수 파라미터 1 == array안에 있는 자료 파라미터 2 == 인덱스(index) [4, 5, 6].map(function(a, i) { console.log(a) // 4 5 6 console.log(i) // 0 1 2 }) return 값을 작성하면 array 자료 개수만큼 array로 반환해줌 [1, 2, 3].map(function(a) {..

컴포넌트 (Component) / 상세 페이지 만들기 컴포넌트 (Component) : html을 한 단어로 축약하기 컴포넌트 사용하는 경우 반복적인 html 축약 큰 페이지 자주 변경되는 UI들 컴포넌트 단점 state를 가져다쓸 때 문제가 생김 (function 범위가 다르기 때문) 컴포넌트 만들기 function 만들기 - 다른 function 밖에 생성 - Component명 => 대문자로 시작 return( ) 안에 html 넣기 - 부모 태그는 꼭 1개여야 함 html을 사용할 곳에 쓰기 - 도 가능 // 방법 1 function Modal() { return ( 제목 날짜 상세내용 ) } // 방법 2 let Modal = () => { return ( ) } 삼항 연산자(ternary op..

블럭 요소 vs 인라인 요소 vs 인라인블럭 요소 블럭요소 (block element) 태그가 좌우공간을 다 차지하는 요소 기본 너비값이 100% ☞ 각 요소가 수직으로 쌓인다. 너비값( width), 높이값(height) ⭕ 상하좌우 마진, 패딩 모두 ⭕ 내부에 블럭요소와 인라인요소를 포함 가능⭕ 인라인요소 (inline element) 태그가 실제로 코딩된 그 영역만 차지하는 요소 기본 너비값 == 컨텐츠 너비값 나란히 위치 가능 ⭕ 너비값( width), 높이값(height) ❌ 위아래 마진 ❌ (좌우 마진, 상하좌우 패딩은 ⭕) 내부에 블럭요소 포함 불가능 ❌ 인라인블럭 요소 (inline-block element) 수평으로 배치⭕ + 크기값 & 상하좌우 마진⭕ 기본 너비값 == 컨텐츠 너비값 ⭐..

state 값 변경하기 / onClick / 좋아요 버튼 UI 만들기 state 값 변경하기 - state변경 함수(새로운 state 값) * 기존의 state == 새로운 state가 같을 경우 변경 안해줌 ❌ * - 등호로 변경 금지 ❌ (좋아요 = 좋아요 + 1) - useState의 두 번째 인자는 state 변경용 함수→ 변경 함수를 사용해야 html 재렌더링이 잘 됨 let [인사, 인사변경] = useState('안녕'); // 인사변경 -> state 변경용 함수 {제목[0]} {인사변경('반가워')} }>👍 {좋아요} array, object의 state 값 변경하기 기존 데이터 복사 - array/object 다룰 때는 원본을 보존하는 것이 좋다 spread로 [괄호] 벗기기 - 원본 ..

state : 자료 저장 - 자료값이 바뀌면 (html이 자동 재렌더링되어) 변경한 값이 html에 자동으로 반영된다. (변수는 X) - 변경될 여지가 있는 값에 사용하기! - Destructuring 문법 https://tensdiary.tistory.com/53 let num = [1, 2]; let a = num[0]; let c = num[1]; => let [a, c] = [1, 2]; 저장 & 사용 - let [작명1, set작명2] = useState('보관할 값') 작명1 = 자료값 작명2 = state 변경을 도와주는 함수 - state 변경 함수명 → set을 붙여서 짓는다! let [제목, b] = useState('여자 코드 추천') let [글, a] = useState(['남자 ..

JSX (Javascript Syntax eXtension) : React에서 html의 요소를 생성 .js 파일에서 사용하는 html 대용품 CSS 파일 연결하기 - 상단에 import 추가 import './파일명'; class 설정하기 - className 변수에 있는 데이터를 html에 넣기 - { 변수명 } - 데이터 바인딩 - id, class에도 사용 가능 ('작은 따옴표' 사용 X) let post = '강남 우동 맛집'; // 서버에서 가져온 실제 데이터 블로그 { post } style 속성 설정하기 - style={ { 스타일명 : '값', 스타일명 : '값 } } - {중괄호} 안에 object 형식으로 사용 - font-size는 fontSize (뺄셈 (-) 사용 X) 블로그 출..