6일차 react

0906 6일차 수업

1번문제 문자열을 정수로 바꾸기 답:
——————————
return Number(s);
——————————
return +s;
—————-
return s/1;
————————————
function solution(s) {
var answer = 0;
answer = Number(s)
return answer;
}

2번문제 같은 숫자는 싫어 답:
function solution(arr){
var answer = [];
//console.log(arr)

for(let i=0; i<arr.length; i++){
	console.log(arr[i])
	if(arr[i] !== arr[i+1]){
		answer.push(arr[i]);
	}
}
return answer;

}

3번째 핸드폰번호가리기 답:
function solution(phone_number) {
var answer = '';
//consloe.log(phone_number)

for(let i=0; i<phone_number.length; i++){
    //consloe.log(phone_number[i])
    if(i<phone_number.length -4){
        answer = answer+'*';
    }else{
        answer=answer+phone_number[i];
    }
    //console.log(i,answer)
}
return answer;

}

——————————————
React

State 짝꿍 props

Freeboard new에선
Try catch
Router.push만 기존에서 추가 됨

/ -> public

옵셔널 체이닝 앞에가 참일때 뒤에꺼 부름
Date &&date.fetchProfile
Date?/fetchProfile

앞에가 거짓일때 뒤에꺼 부름
data||data.fetchProfile

거짓일때라도 Null과 거짓일때만
data??data.fetchProfile

폴더를 분리하면 좋다
폴더구조 체계화
분리방법이 여러가지 중
Container/prosenter 패턴이 가장 많이 쓰임
패턴=효율적인 방법

컴포넌트
Container 부모 컴포넌트
prosenter 자식 컴포넌트

연결시킬때 쓰는게 props

자동으로 생성됨
props={} 객체
객체안에 key: 함수(값)

react에서 데이터의 흐름이 단반향이다
자식에서 부모로는 못올려줌

파스칼케이스
앞에 대문자

열결안됐을땐 글씨가 연함

내보낼땐 export
받을땐 import

export 로 여러개 보내면
Import{}
export default 로 보내면
Import

Return 단일일땐 ()생략가능
바로 옆에다 적었을때만 가능
밑에다 적을 경우 () 해야 함!!!!!!!!

props로 부모컴포넌트에서 자식으로 보내줌

——————————————————————————
Zzz가 true일때 글자색red, false일때 글자색 yellow
작성방법
Container.js에서
const [zzz, setZzz] = useState(true) 만들고 초기값을 true
Return(zzz={zzz})로 보내고

Presenter.js에서
(props)로 받아서
return안에서
zzz={props.zzz} 로 받아서

Styles.js에서
color: ${(props)=>(props.zzz === true ? 'red' : 'yellow')};
조건주면 끝

—————————————————————————————————
// myWriter,myTitle, myContents 모두 내용이 저장되어 있다면,
// 즉, (myWriter !== "" && myTitle !== "" && myContents !== "")라면,
// setQqq를 사용해서, false => true, 이모션의 버튼색을 노란색으로 변경하기
//조건을 하나씩 다 줘야함
function onChangeMyWriter(event){
setMyWriter(event.target.value)
if(myWriter !== "" && myTitle !== "" && myContents !== ""){
setQqq(true)
}
}

function onChangeMyTitle(event){
    setMyTitle(event.target.value)
    if(myWriter !== "" && myTitle !== "" && myContents !== ""){
        setQqq(true)
    }
}

function onChangeMyContents(event){
    setMyContents(event.target.value)
    if(myWriter !== "" && myTitle !== "" && myContents !== ""){
        setQqq(true)
    }
}

이렇게하면 2글자 이상 입력해야 true로 인식
1글자로도 변하게 하려면

function onChangeMyWriter(event){
setMyWriter(event.target.value)
if((event.target.value) !== "" && myTitle !== "" && myContents !== ""){
setQqq(true)
}
}

function onChangeMyTitle(event){
    setMyTitle(event.target.value)
    if(myWriter !== "" && (event.target.value) !== "" && myContents !== ""){
        setQqq(true)
    }
}

function onChangeMyContents(event){
    setMyContents(event.target.value)
    if(myWriter !== "" && myTitle !== "" && (event.target.value) !== ""){
        setQqq(true)
    }
}